防抖和节流

快来打我* 2021-09-07 06:13 516阅读 0赞

### 防抖和节流 ###

*  一、什么是防抖
 *  二、防抖使用场景
 *   *  1.输入框是按键触发请求时
 *  三、什么是节流
 *  四、节流的使用场景
 *   *  1.鼠标连续点击触发事件
     *  2.懒加载时要监听计算滚动条的位置
 *  五、节流阀的概念
 *  六、防抖和节流的区别

# 一、什么是防抖 #

防抖是当事件被触发后，延迟n秒后再执行回调，如果再这n秒内事件又被触发，则重新计时，等于游戏中的回城。

# 二、防抖使用场景 #

## 1.输入框是按键触发请求时 ##

用户连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源，  
代码：

var time = null   
      //定义一个要发生的数据
      getdata(data){ 
      //data是发送的数据
        //发送请求
    }
    //防抖的timer
    
    //定义防抖的函数，调用这个函数后，会设置一个定时器
    //request是发送请求的函数。
    function fn(keword,request){ 
    //keword是你要传递的参数
    //request是你发送请求的函数名
    //开启定时器后，会返回一个定时器的id，可以接受这个id，清除的时候也是根据这个id来清除的。
       time = setTimeout({ 
       //发送请求
        request(keword)
    }，500)
    }
    
    input.keyup = function(){ 
         clearTimeout(timer)
         fn(keywords,getdata)
         //keywords是用户输入的值
    }
    //给输入框绑定事件
    //按键抬起后触发， 先清除定时器，

缓存你的输入  
1.定义一个全局的缓存对象  
var cacheobg = \{\}  
2.将搜索结果保存到缓存对象中

function  fn2(data){ 
       var a =   input.value
       //获取输入的内容当中键
       cacheobg [a]  = res
       //把结果和键名对应。
       //这样用户输入到这个内容时，就会对应到这个数据
       //然后显示出来。
       //这样就可以不用发送请求。直接获得数据。
    }

# 三、什么是节流 #

节流就是减小一段实际内事件的触发频率，按下之后，后续的按下或输入都不会再执行，只能触发第一次的事件，必须等第一件事执行完后，才能执行下一次的事件。

//vue中的场景，time是data里的变量
    cleartime(){ 
          //第一步是清除定时器，
           clearTimeout(this.time)
          //第二部要把存定时器的值清空，不然还存着定时器的那个id
          this.time = null
        },
         //请求函数
        getdata(){ 
         //如果定时器存在，则退出函数
        if(this.time){ 
          return
        }
        //不存在就创建一个定时器
          this.time = setTimeout(()=>{ 
           //用箭头函数this是vue
           //不用箭头函数，this是window
           //执行你的逻辑。
    
           //之后执行清空定时器函数在上面
            this.cleartime()
          },3000)
       
            }

自行封装可以更简便

# 四、节流的使用场景 #

## 1.鼠标连续点击触发事件 ##

只在单位时间内触发一次。

## 2.懒加载时要监听计算滚动条的位置 ##

但不必每次滑动都触发，可以降低计算的频率，而不必浪费cpu资源

# 五、节流阀的概念 #

节流阀为空，表示可以执行下次操作， 不为空，就不能执行下次操作。  
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作。  
每次执行前，必须先判断节流阀是否为空，不为空就直接return出去。

即就是防抖的代码不是去除定时器，而是判断定时器，存在就不会执行了，不存在定时器就会执行后面的代码。

# 六、防抖和节流的区别 #

防抖：事件被频繁的触发，防抖能保证只有最后一次触发生效，前面n多次的触发都会被忽略，  
节流:如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性的执行一部分事件