scroll 事件是一个非常容易被反复触发的事件。其实不止 scroll 事件，resize 事件、鼠标事件（比如 mousemove、mouseover 等）、键盘事件（keyup、keydown 等）、一个实时搜索功能都存在被频繁触发的风险。

频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttle（事件节流）和 debounce（事件防抖）出现了。

“节流”与“防抖”的本质

这两个东西都以闭包的形式存在。
它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制事件的触发频率。
注意：
防抖和节流只是减少了事件回调函数的执行次数，并不会减少事件的触发频率。
防抖和节流并没有从本质上解决性能问题，我们还应该注意优化我们事件回调函数的逻辑功能，避免在回调中执行比较复杂的DOM操作，减少浏览器reflow和repaint。

Throttle： 第一个人说了算

throttle 的中心思想在于：在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时结束时给予响应。
理解了大致的思路，我们现在一起实现一个 throttle：

  1. // fn是我们需要包装的事件回调, interval是时间间隔的阈值
  2. function throttle(fn, interval) {
  3.   // last为上一次触发回调的时间
  4.   let last = 0
  6.   // 将throttle处理结果当作函数返回
  7.   return function () {
  8.       // 保留调用时的this上下文
  9.       let context = this
  10.       // 保留调用时传入的参数
  11.       let args = arguments
  12.       // 记录本次触发回调的时间
  13.       let now = +new Date()
  15.       // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
  16.       if (now - last >= interval) {
  17.       // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
  18.           last = now;
  19.           fn.apply(context, args);
  20.       }
  21.     }
  22. }
  23. // 用throttle来包装scroll的回调
  24. const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
  25. document.addEventListener('scroll', better_scroll)

Debounce： 最后一个人说了算

防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。
这次的司机比较有耐心。第一个乘客上车后，司机开始计时（比如说十分钟）。十分钟之内，如果又上来了一个乘客，司机会把计时器清零，重新开始等另一个十分钟（延迟了等待）。直到有这么一位乘客，从他上车开始，后续十分钟都没有新乘客上车，司机会认为确实没有人需要搭这趟车了，才会把车开走。
我们基于上面的理解，一起来写一个 debounce：

  1. // fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
  2. function debounce(fn, delay) {
  3.   // 定时器
  4.   let timer = null
  6.   // 将debounce处理结果当作函数返回
  7.   return function () {
  8.     // 保留调用时的this上下文
  9.     let context = this
  10.     // 保留调用时传入的参数
  11.     let args = arguments
  12.     // 每次事件被触发时，都去清除之前的旧定时器
  13.     if(timer) {
  14.         clearTimeout(timer)
  15.     }
  16.     // 设立新定时器
  17.     timer = setTimeout(function () {
  18.       fn.apply(context, args)
  19.     }, delay)
  20.   }
  21. }
  22. // 用debounce来包装scroll的回调
  23. const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000)
  24. document.addEventListener('scroll', better_scroll)


用 Throttle 来优化 Debounce

debounce 的问题在于它“太有耐心了”。试想，如果用户的操作十分频繁——他每次都不等 debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。
为了避免弄巧成拙，我们需要借力 throttle 的思想，打造一个“有底线”的 debounce——等你可以，但我有我的原则：delay 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须要给用户一个响应。这个 throttle 与 debounce “合体”思路，已经被很多成熟的前端库应用到了它们的加强版 throttle 函数的实现中：

  1. // fn是我们需要包装的事件回调, delay是时间间隔的阈值
  2. function throttle(fn, delay) {
  3.   // last为上一次触发回调的时间, timer是定时器
  4.   let last = 0, timer = null
  5.   // 将throttle处理结果当作函数返回
  7.   return function () {
  8.     // 保留调用时的this上下文
  9.     let context = this
  10.     // 保留调用时传入的参数
  11.     let args = arguments
  12.     // 记录本次触发回调的时间
  13.     let now = +new Date()
  15.     // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
  16.     if (now - last < delay) {
  17.     // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
  18.        clearTimeout(timer)
  19.        timer = setTimeout(function () {
  20.           last = now
  21.           fn.apply(context, args)
  22.         }, delay)
  23.     } else {
  24.         // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
  25.         last = now
  26.         fn.apply(context, args)
  27.     }
  28.   }
  29. }
  30. // 用新的throttle包装scroll的回调
  31. const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
  32. document.addEventListener('scroll', better_scroll)