标签：down   sha   删除   random   存在   rtc   else   计算   直接   

浅谈 JS 的防抖和节流

前言：在了解防抖和节流之前，我们来认识聚焦事件和键盘事件

一、聚焦事件 (focus、blur、input)

• FocusEvent事件

  焦点事件主要用于表单元素，以及超链接,使用点击或者tab可以切换汇聚焦距，当input聚焦是触发focus,失去焦点时触发blur

  • foucs 是汇聚焦距 一般汇聚焦距时，会有outline样式
  • blur 失去焦点
  • 事件对象中relatedTarget为上一个失去焦点对象

    

        aaaa
bbb
aaaa
aaaa
aaaa

    超链接
    

失焦和聚焦主要用来判断表单验证

        // input  输入事件主要用于文本框和多行文本框

        var input=document.querySelector("input");
        input.addEventListener("input",inputHandler);

        function inputHandler(e){
           console.log(e);
        // e.data: "s"  本次输入的内容
        // e.isComposing: false  输入法是否启动
        // e.inputType 输入的类型
        // insertCompositionText 输入插入
        // historyUndo 历史返回
        // insertText  插入文本
        // deleteContentBackward 退格删除（删除前一个）
        // deleteContentForward  delete删除（删除后一个）
        // deleteByCut 剪切删除
        // insertFromPaste 粘贴插入
      }

二、KeyboardEvent 键盘事件

1、节流

文本框在输入的时候，如果每输入一次就判断一次，会造成效率太低，我们让它每间隔一段时间，再去验证。即指连续触发事件但是在 n 秒中只执行一次函数。

实现原理

给 input 设置一个属性，第一次触发事件时，属性值为 false，则往下执行，500毫秒后获取 input 的值，同时删除 ids 的值；第二次输入时，当500毫秒还没到时，ids 为 true ，则直接跳出，不去获取 value 值 。在500毫秒中，只执行一次函数。

节流的定时器写法：

节流的时间戳写法：

2.防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
keydown事件，当键盘按下时触发，如果键盘一直按下，则会一直触发这个事件，我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这种情况防抖是比较好的解决方案。

===实现原理：

当持续触发keydown事件时，事件处理函数handle只在停止按键500毫秒之后才会调用一次，也就是说在持续触发keydown事件的过程中，事件处理函数handle一直没有执行。

节流和防抖有相似之处，我们在上面节流的基础上，该成下面的代码

防抖封装：

 function debounce(fn, wait) {
    var timeout = null; //定义一个定时器
    return function () {
        if (timeout !== null)
            clearTimeout(timeout); //清除这个定时器
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random());
}
// 侦听事件
document.addEventListener("keydown", debounce(handle, 1000));

防抖和节流的区别?

• 节流是将多次执行变为每隔一段时间执行
• 防抖是将多次执行变为最后一次执行

浅谈 JS 的防抖和节流

标签：down   sha   删除   random   存在   rtc   else   计算   直接   

原文地址：https://www.cnblogs.com/my12-28/p/12655481.html