JavaScript中的节流与防抖函数记不住？我的答案保你终身难忘【一小时搞懂，建议收藏】

前端性能优化-防抖和节流

前言

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。

据说阿里有一道面试题就是谈谈函数节流和函数防抖。

防抖（debounce）

函数防抖（debounce）：当持续触发事件时，在设置的周期内没有再触发事件，事件处理函数才会执行一次，如果设定的周期没有结束，又一次触发了事件，就重新开始延时。

为了有个直观的对比，我们先看下没有使用debounce技术的click事件：

我们看到，当用户频繁点击button按钮时，控制台会频繁的输出结果，这种频繁调用事件处理程序，会加重浏览器的负担，导致用户体验非常糟糕。

为了解决上述问题，我们在编码中可以使用debounce防抖技术。

防抖原理：是维护一个计时器，在规定的delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

看一个（栗子）：

function debounce(fn, delay) {
  var timer = null;
  return function() {
     // 清除已存在的定时器
     timer && clearTimeout(timer)
     timer = setTimeout(function() {
        fn.apply(this)
     }, delay)
  }
}
let $btn = document.getElementById('btn');
var fn = function() {
  console.log ('防抖旨在时间段内只触发最后一次执行' + new Date(Date.now()));
}
$btn.onclick = debounce(fn, 1000);

如图，持续触发click事件时，并不会每次触发都会执行事件处理函数，当在设置的周期1000 ms内没有再触发click事件时，才会延时触发click事件。

节流（throttle）

函数节流（throttle）：函数执行一次后，只有在大于设置的执行周期后才会执行第二次。持续触发事件时，保证一定时间段内只调用一次事件处理函数。

throttle翻译为节流阀，我们可以想象成我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

同样我们先看一个没有使用throttle技术的scroll事件，如下图：

这种频繁的scroll操作都会给浏览器带来沉重的负担，接下来我们看下如何使用throttle技术。

节流原理：是记录上次执行的时间戳lastTime，每次触发事件时记录当前执行的时间戳nowTime，然后判断nowTime与lastTime的差值是否大于设定的周期delay，如果大于，则执行回调，并更新上次执行的时间戳，从而循环。持续触发事件时，保证一定时间段内触发事件处理函数的频率。

再看一个：

function throttle(fn, delay) {
  // 记录上次触发的时间戳
  var lastTime = 0;
  return function() {
     // 记录当前触发的时间戳
     var nowTime = Date.now();
     // 如果当前触发与上次触发的时间差值 大于 设置的周期则允许执行
     if (nowTime - lastTime > delay) {
        fn.call(this);
        // 更新时间戳
        lastTime = nowTime;
     }
  }
}
document.onscroll = function () {
  console.log ('节流旨在时间段内控制触发的频率'+new Date(Date.now()))
}

如下图，持续触发scroll事件时，并不立即执行处理函数，当当前触发与上次触发的时间差值大于设置的周期时才会执行。

应用场景

上面介绍了防抖（debounce） 和 节流（throttle） 的原理和实现方式。

下面简单列出两者的应用场景都有哪些：

防抖（debounce）应用场景：

每个调整大小/滚动都会触发统计事件。
验证文本输入（在连续文本输入后，发送Ajax请求进行验证）。
监视滚动scroll事件（在添加去抖动后滚动，只有在用户停止滚动后才会确定它是否已到达页面底部）。

节流（throttle）应用场景：

实现DOM元素的拖放功能mousemove。
搜索关联keyup。
计算鼠标移动距离mousemove。
画布模拟草图功能mousemove。
射击游戏中的 mousedown/keydown事件（每单位时间只能发射一颗- 子弹）。
监视滚动scroll事件（添加节流后，只要滚动页面，就会每隔一段时间才会计算）。

总结

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

往期推荐

高频JavaScript面试题汇总

✍话题

什么样的答案终身难忘？学生时代关于记忆经常能听见两种论调：
1.死记硬背：见效快，但也忘得快，且一般不会灵活运用（指标不治本）
2.理解性记忆：见效慢，但记忆持久且会灵活运用（治标又治本）

如果是你，你愿意pick哪种？