防抖与节流，不要再分不清啦！

本篇文章主要介绍防抖和节流的原理，以及它们的区别。

防抖与节流的问题总是会在面试中出现（然而我并没有遇到），如果你在面试前有背书，那肯定能过这题的，但如果现实开发中用的不多的话，估计就很快忘记了怎么写来着（我就是这样）。究其原因就是没彻底弄清楚这两个的原理与区别，所以准备这次来好好梳理一下。

我们知道前端开发中会遇到频繁触发的事件，比如keyup、keydown事件，mousedown、mousemove事件，还有window 的 resize、scroll等。如果任由用户频繁触发此类事件，将带来极大的性能消耗，或可能导致页面卡顿。作为有前途的前端人，我们有必要掌握优化技巧，一般解决这类问题的方法也就是防抖和节流了。

那么问题也就来了，我们可以去网上搜到相关插件，也能搜到很多优秀的实现源码，那到底什么场景用防抖，什么场景用节流呢？我们慢慢来看。

防抖（debounce）

先看防抖，用一句话概括防抖就是：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

说的通俗点就是：你尽管频繁触发事件，但我一定是在触发事件的n秒后才执行，如果在前一个事件触发的n秒内又重新触发了这个事件，那就以新的事件的时间为准，n 秒后才执行。核心点就是，要等你在触发事件后的n秒内不再重新触发事件，我才执行。

我先放一段基本的防抖函数源码：

// fn 函数传入用户方法
// delay 延迟执行的时间，默认 500ms
function debounce(fn, delay = 500) {
  let timer = null
  return function() {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

社区有很多文章写了关于防抖函数的实现，每个人的实现方式可能都有细微区别，但其核心部分也就是上面这段了，对我而言够用，后面会详细说这段代码。现在我们举例一个常见场景来应用一下这段代码，我们来监听一下 input元素的 keyup事件，每次释放键盘时打印输入值，我们先不加入防抖：

<body>
  <input id="input" type="text" />

  <script>
    let input = document.getElementById('input')

    input.addEventListener('keyup', function() {
      console.log(input.value)
    })
  </script>
</body>

运行上面代码，可以看到每次释放键盘时控制台都在打印，频率很高，但因为要执行的操作只是简单的打印，所以感受不到性能的消耗。而现实开发里时常要执行的操作是ajax请求，假设 1 秒触发了 60 次，每个请求回调就必须在 1000 / 60 = 16.67ms 内完成，否则可能就会出现卡顿。所以优化这段操作很有必要，我们来应用前面的防抖函数：

  <body>
    <input id="input" type="text" />

    <script>
      let input = document.getElementById('input')

      input.addEventListener(
        'keyup',
        debounce(function() { // 此处通过 debounce 返回用户操作函数
          console.log(input.value)
        }, 1000)
      )
    </script>
  </body>

加入防抖的效果大家是可以预见的，它抑制住了高频操作，此时用户持续输入，并在 1s 内重新输入时是不会触发打印操作的，核心就在这个 1s 内，如果用户停止输入并超过 1s ,则会执行打印。我们可以结合上面的debounce函数源码来分析一下流程：

当输入第一个字符，并第一次触发keyup时，timer为null，所以开始新的定时任务，1秒后执行打印操作，并晴空timer；
在 1 秒内，用户又输入了第二个字符，再次触发事件，此时定时器保存了上一次的任务，所以执行clearTimeout(timer)清空了定时器，并重新赋值新的定时任务；
后续用户持续输入时，反复执行上一步的操作；
当用户停止输入时，经过 1 秒后，则终于可以执行定时器里的任务。

以前不知道为什么这么写，现在了解了，记住就行了。另外debounce函数中有一个问题一直被人问起，就是为什么要fn.apply(this, arguments)这样，而不是直接fn()这样。其实不使用apply也是可以的，但为了程序的稳定性，还是加入比较好，毕竟又不麻烦。加入apply后解决了两个不稳定因素：

不使用防抖函数时，在fn中打印this，本例中指向的是<input id="input" type="text">，而在加入防抖函数后，指向的是Window对象，所以要手动改正 this 指向。
事件处理函数中会提供事件对象 event，使用防抖函数前后会改变事件对象。比如例子中，使用防抖前，event指向的是 KeyboardEvent对象，加入防抖后则变成 undefined了，所以也要手动传入参数。

这些都是js基础，还是需要打牢的。如果源码中的定时器里不是箭头函数，就需要这样写了：

function debounce(fn, delay = 1000) {
  let timer = null

  return function(...args) {  // 此处显示定义出参数对象
    let context = this // 缓存 this 对象

    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() { 
      fn.apply(context, args) // 注意改变
      timer = null
    }, delay)
  }
}

节流（throttle）

也用一句话概括节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

同样是抑制高频事件触发，与防抖的区别在于它不需要用户停顿，而是在持续触发的过程中每隔 n 秒执行一次。

实现节流一般有两个方向，一是使用时间戳，而是使用定时器。

既然是为了比较，那还是使用上面的例子，即监听keyup事件。我们先看用时间戳来实现节流：

// fn 函数传入用户方法
// wait 间隔执行时间，默认 500ms
function throttle(fn, wait=500) {
  // 初始时间点
  let previous = 0
  return function(...args) {
    let context = this
    let now = +new Date() // 当前时间戳
    if (now - previous > wait) {
      fn.apply(context, args)
      previous = now
    }
  }
}

当我们应用这个方法时，即：

input.addEventListener(
  'keyup',
  throttle(function() {
    console.log(input.value)
  }, 1000)  // 便于演示，设定wait为 1秒
)

此时浏览器运行代码，在input框持续输入时，会发现每隔 1 秒就会打印值。我们来梳理一下流程：

输入第一个字符时，进入节流逻辑，时间戳肯定大于 1 秒，所以立刻执行打印操作，同时将 previous 设定为当前时间戳；
持续输入，间隔时间小于 1 秒时，不执行操作，previous不变，now一直在增长；
当now增长到与previous的差值大于 1000 时，执行打印，更新previous;
如此往复，每隔 1 秒打印一次。而最后输入的值则不会被打印，因为持续的过程中，最后一次的差值还没到1000就停止输入了，超过 1000 时，则是算重新第一次输入了。我说的可能不好明白，自己走一遍流程就清楚了。

由此，上面的节流方案可以做到限制高频触发事件，它的特点是：使用时间戳方式实现的节流，在第一次触发时会立刻执行，而停止触发后没有办法再执行事件。

现在我们再来试试使用定时器实现的节流方式，放上源码：

// fn 函数传入用户方法
// wait 间隔执行时间，默认 500ms
function throttle(fn, wait) {
  let timeout
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        fn.apply(this, args)
        timeout = null
      }, wait)
    }
  }
}

使用方法是一样的：

input.addEventListener(
  'keyup',
  throttle(function() {
    console.log(input.value)
  }, 1000)  // 便于演示，设定wait为 1秒
)

此时运行效果依旧是每隔 1 秒执行一次，但也稍有区别，再来梳理一下这个流程：

输入第一个字符时，进入节流逻辑，初始定时器无值，所以赋值新的定时任务，1 秒后执行；
此时用户在持续输入，但因为第 1 步定时器已经被赋值了，所以不重新赋值了，函数不执行逻辑；
此时 1 秒已经过去了，第一步中的定时任务触发，执行打印操作，清空定时器；
继续输入时，timeout定时器因为被清空了，所以重新赋值，走第 1 步中的逻辑；
如此往复，总是间隔 1 秒执行一次。可以发现第一次触发事件时不会立刻执行，而停止输入时，最后还会执行一次。

自己多过几遍流程就会很清晰了。

总结

来做个总结：

防抖与节流的区别

我不想从定义上说区别，直接从使用结果上比较区别：

使用防抖：持续触发高频事件时，只要触发时间间隔小于设定的时间阀值，不管持续多久都不会执行用户操作，只有当停顿时间超过设定的时间阀值时，才会执行一次操作。
使用节流：持续触发高频事件时，每隔一段时间就触发一次操作，不需要“停顿”，这个一段时间是指你设定的时间阀值。所以在这个持续的过程中，会多次触发操作，而防抖是一个持续过程后只触发一次。

所以何时使用防抖，何时使用节流，全看你需要的效果，而效果就是上面总结的。

节流两种实现方式的区别

时间戳方式：事件会立刻执行，事件停止触发后没有办法再执行。
定时器方式：事件会在 n 秒后第一次执行，事件停止触发后依然会再执行一次事件。

当然有时候这两种节流方式可能都不能满足需求，比如你既想要能够立即执行，也要结束时还能执行一次，又比如你想要自己控制它开始和结束的状态，不用怕，社区里都能找到你要的，况且我们还有 Lodash 这样优秀的插件。我在这里只是想要介绍一下他们的原理和区别。

如有不对之处，望指正，谢谢。