什么是节流防抖？

在用户浏览网页或者在网页上进行一些操作时，我们常常需要监听一些事件去完成相应的功能。比如鼠标点击、键盘输入、滚轮滚动等等一些事件。

在处理这些事件时，我们可能会发现，某些事件发生的频率特别高，有的事件监听函数甚至直接造成了页面的卡顿和崩溃。

举个例子，假如我们需要在用户输入时，根据用户的输入内容自动联想相关词汇进行搜索：

const input = document.querySelector('input')

input.addEventListener('input', () => {
  console.log(1)
})

此时可以看到这个效果：

每输入一次就执行一次

用户每输入一个字符就进行一次相关操作，有时候很可能是还没有输入完成或者输错的情况，但我们的代码也进行了一次操作，这就造成了一些不必要的网络请求和性能浪费。

所以，我们并不需要代码如此高频率的执行，这在一定程度上对系统资源造成了浪费，程序的性能也会因此变得很差。因此，我们需要对这些事件的监听做更进一步的处理，对代码的执行频率进行一些限制。这就是所谓的节流防抖。

节流防抖的原理

节流和防抖，二者的作用虽然相同，但是在原理和实现上存在一定的区别：

节流：频繁地触发某个事件，但一定的时间内只执行一次。函数名通常为 throttle。

防抖：频繁地触发某个事件，但只执行最后一次。函数名通常为 debounce。

实现节流函数

虽然事件不断地被触发，但节流函数就就像红绿灯一样，不管前面有多少车辆排队，我就是需要等待一段时间才变为绿灯，你才能通行。

所以最直接的方式还是利用定时器去处理。当事件首次被触发时，开始计时 wait 毫秒，wait 毫秒以内不管触发了多少次，都会被忽略，直到计时结束后再去执行。

思路有了，方法就不难实现。将事件处理函数设为第一个参数 func，将等待时间设为第二个参数 wait。

// 节流函数
function throttle(func, wait) {
  // 创建一个定时器
  let timeout = null
  // 返回一个函数，这个函数会在一个时间区间结束后调用 func
  return function() {
    // 如果定时器还在运行，则跳过
    if (timeout) return
    // 否则，设置定时器，等待 wait 毫秒后执行 func 函数
    timeout = setTimeout(() => {
      // 执行 func 函数
      func.apply(this, arguments)
      // 清空定时器
      timeout = null
    }, wait)
  }
}

在上面的代码中，我们创建了一个定时器，并将它赋值给了一个变量 timeout。当事件被触发时，我们检查定时器是否在运行，如果在运行，则跳过，否则执行。

为 input 事件添加节流函数：

input.addEventListener('input', throttle(handleInput, 500))

运行效果：

使用了节流函数，每过一段时间执行一次

实现防抖函数

如何判断是否为频繁触发的最后一次，很简单，我们只需要在第一次触发该事件时，设定一个等待 wait 毫秒的定时器，在计时器结束之前如果再次被触发，则重新计时，直至不再被触发，再去执行传入的函数。

根据这个思路，我们就可以很轻松的实现一个基础的 debounce 方法。将事件处理函数设为第一个参数 func，将等待时间设为第二个参数 wait。

// 防抖函数
function debounce(func, wait) {
  // 创建一个定时器
  let timeout
  // 返回一个函数，这个函数会在一个时间区间结束后调用 func
  return function() {
    // 如果定时器还在运行，则清除定时器
    timeout && clearTimeout(timeout)
    // 否则，设定定时器，等待 wait 毫秒后执行 func 函数
    timeout = setTimeout(() => {
      // 执行 func 函数
      func.apply(this, arguments)
    }, wait)
  }
}

在上面的代码中，我们创建了一个定时器，并将它赋值给了一个变量 timeout。当事件被触发时，我们检查定时器是否在运行，如果在运行，则清除定时器，否则执行。

为 input 事件添加防抖函数：

input.addEventListener('input', debounce(handleInput, 500))

运行效果：

使用了防抖函数，停止输入后再去执行

apply

上面的代码中使用了 apply，它是 Function.prototype 的一个方法，作用是将一个函数的作用域设置为某个对象，并将参数传入函数。

有关 apply 的详细介绍，可以点击这里查看。

源码下载

点击这里查看源码。

手写实现节流防抖函数，仅需十行代码