一文学会JavaScript如何手写防抖节流

在本篇文章中，我们将深入探讨JavaScript中的“防抖（debounce）”和“节流（throttle）”的概念，以及如何手写实现它们。以下是详细攻略：

什么是防抖和节流

在理解如何手写实现防抖和节流之前，需要先了解它们是什么。

防抖

当需要执行一个函数时，如果该函数需要被频繁地调用，会导致性能问题。防抖可以解决这个问题。防抖的原理是：在调用函数后，设置一个定时器，如果在定时器的时间范围内再次调用该函数，则会清除先前的定时器，并重新设置一个新的定时器。如果在该定时器的时间范围内没有再次调用该函数，则执行该函数。

节流

与防抖类似，节流也是为了解决频繁调用函数出现性能问题的问题。不同之处在于，节流是在多次调用中只执行一次函数。具体做法是，在每次调用函数前，先比较当前时间与上一次执行时间的时间差，如果时间差超过了规定的时间间隔，则执行该函数并更新执行时间；如果时间差没有超过规定的时间间隔，则不执行该函数。

手写实现防抖

以下是手写实现防抖的代码：

function debounce(fn, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

以上代码中，我们定义了一个函数debounce，它接收两个参数：要防抖执行的函数fn和防抖等待执行时间delay。该函数中创建了一个定时器timer，并返回一个闭包函数，在每次调用该闭包函数时，会清除先前的定时器，并重新设置一个新的定时器来延迟执行fn函数。

以下是一个使用防抖函数的示例，假设我们想要在通过输入框搜索时避免频繁地向后端发送请求：

let input = document.querySelector('#search');
input.addEventListener('input', debounce((e) => {
  // 发送请求给后端
}, 500));

在以上代码中，我们在输入框上添加了一个事件监听器，该事件监听器使用了debounce函数来延迟500ms执行搜索函数。这样，无论用户输入速度如何，我们都只会在用户停止输入一段时间之后才进行搜索。

手写实现节流

以下是手写实现节流的代码：

function throttle(fn, interval) {
  let previous = 0;
  return function () {
    const current = Date.now();
    if (current - previous > interval) {
      fn.apply(this, arguments);
      previous = current;
    }
  };
}

以上代码中，我们定义了一个函数throttle，它接收两个参数：要节流执行的函数fn和节流执行时间间隔interval。该函数中定义了一个变量previous来记录上一次执行函数的时间，在每次调用该闭包函数时，会比较当前时间与上一次执行时间的时间差，如果时间差超过了规定的时间间隔，则执行该函数并更新执行时间；如果时间差没有超过规定的时间间隔，则不执行该函数。

以下是一个使用节流函数的示例，假设我们想要在用户进行窗口滚动时避免频繁地调用函数：

window.addEventListener('scroll', throttle(() => {
  // 处理函数逻辑
}, 500));

在以上代码中，我们在窗口上添加了一个滚动事件监听器，该事件监听器使用了throttle函数来限制函数调用时间间隔为500ms。这样，即使用户频繁触发滚动事件，我们也只会在指定时间间隔内调用一次函数。

结论

本文介绍了JavaScript中的“防抖”和“节流”的概念，并分别通过示例详细讲解了如何手写实现它们。在实际开发中，合理使用防抖和节流可以降低函数的调用次数，从而提高程序性能。