防抖节流闭包的真谛所在

Posted 2022-06-24 xiao-yaolx

哈哈，我也是一个标题党，今天想总结一下，今天学到的东西，便于今后复习拿出来看。

首先呢，防抖是什么？

防抖： 持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

定义比较难懂，举一个比较贴切的例子就是 ，坐电梯。  每次电梯开门时就会停留10s钟等待乘客，当10s中结束后，电梯会自动关门，但如果这时又有乘客进入，则电梯又会等待10s。没错，这就是防抖的定义。

再来介绍一个防抖的应用场景：

　　　　例如：使用百度搜索学习资源时，当向输入框输入 搜索词 后，才会在搜索框推荐与你搜索词相关的字词。而不是你每输入一个字就推荐一下。

函数防抖就是解决实时搜索（kepup）、拖拽(mousemove)等问题的。

 

 

可见，每次触发事件都会执行回调函数，现在加入防抖处理：

var debounce = function(func, delay) 
  var timer = null
  return function() 
      var that = this;
      var args = arguments;
      
      if(timer) 
          clearTimeout(timer);
      

      timer = setTimeout(function() 
          func.apply(that, args);
      , delay)
  


ipt.addEventListener(‘keyup‘, debounce(function(e)
  console.log(e.target.value);
, 400))

　　效果如下：

可见，输入框在停止输入400ms后执行回调。在防抖后的回调函数用 timer 记录计时，每次执行回调的时候会先清空之前的计时。注意这里的timer是闭包变量，始终保持着上一个计时。

这就是所谓的防抖。

函数节流

节流throttle: 让事件的回调一定时间间隔只执行一次。节流函数有两种实现方式，一种是记录增量，一种是定时方式。