防抖、节流、闭包的真谛所在

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

首先呢，防抖是什么？

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

定义比较难懂，举一个比较贴切的例子就是，坐电梯。每次电梯开门时就会停留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: 让事件的回调一定时间间隔只执行一次。节流函数有两种实现方式，一种是记录增量，一种是定时方式。

防抖、节流、闭包的真谛所在

函数节流

猜你喜欢