用更少的代码和更快的速度：掌握函数节流与函数防抖

2023-09-23 09:44:40

函数节流：控制函数的触发频率

函数节流，顾名思义，就是控制函数的触发频率，防止它在短时间内被重复调用。这在以下场景下非常有用：

事件处理： 当用户在短时间内连续触发某个事件时，例如快速点击按钮或滚动页面，我们可以使用函数节流来防止该事件处理函数被重复调用，从而避免不必要的计算和资源浪费。
API 请求： 当用户在短时间内连续发送多个 API 请求时，我们可以使用函数节流来限制请求的发送频率，防止服务器超载。
动画效果： 当我们在页面中使用动画效果时，我们可以使用函数节流来控制动画的更新频率，防止动画过于频繁而导致页面卡顿。

函数节流的实现方式有很多种，最常见的一种是使用定时器。以下是一个使用定时器实现函数节流的示例：

function throttle(func, wait) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, wait);
    }
  };
}

在上面的示例中，throttle 函数接受两个参数：func 是要节流的函数，wait 是节流的等待时间（毫秒）。当调用 throttle 函数时，它会返回一个新的函数，这个新函数会在被调用时检查是否有正在运行的定时器。如果没有，则启动一个新的定时器，并在 wait 毫秒后调用 func 函数。如果在 wait 毫秒内再次调用这个新函数，则会重置定时器，防止 func 函数被重复调用。

函数防抖：等待一段时间后执行函数

函数防抖，与函数节流类似，也是为了控制函数的触发频率，但它的方式不同。函数防抖会在一段时间内只执行一次函数，即使在这个时间段内函数被多次调用。这在以下场景下非常有用：

搜索框： 当用户在搜索框中输入文字时，我们可以使用函数防抖来防止搜索请求被多次发送。这样可以减少服务器的负担，并提高搜索体验。
表单验证： 当用户在表单中输入内容时，我们可以使用函数防抖来防止表单验证被多次触发。这样可以减少不必要的验证计算，并提高表单的性能。
图片加载： 当用户滚动页面时，我们可以使用函数防抖来防止图片被重复加载。这样可以节省带宽，并提高页面的加载速度。

函数防抖的实现方式也有很多种，最常见的一种是使用定时器。以下是一个使用定时器实现函数防抖的示例：

function debounce(func, wait) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

在上面的示例中，debounce 函数接受两个参数：func 是要防抖的函数，wait 是防抖的等待时间（毫秒）。当调用 debounce 函数时，它会返回一个新的函数，这个新函数会在被调用时检查是否有正在运行的定时器。如果有，则清除这个定时器。然后，启动一个新的定时器，并在 wait 毫秒后调用 func 函数。如果在 wait 毫秒内再次调用这个新函数，则会清除之前的定时器，并重新启动一个新的定时器。这样就保证了 func 函数只会被执行一次，直到 wait 毫秒后。