防抖与节流——探秘现代 JavaScript 的必备武器

一、何为防抖与节流？
在 JavaScript 中，我们可能会遇到频繁触发事件的情况。例如，当我们在搜索框中输入文字时，通常希望每输入一个字符就触发建议功能。但是，频繁触发事件可能会导致性能下降，尤其是对于那些需要进行大量计算或昂贵操作的事件。

防抖和节流都是解决此类问题的手段，但方式略有不同。防抖保证函数在特定时间内只触发一次，即使事件被触发多次。而节流则确保函数在一个固定的时间间隔内只触发一次。

二、防抖的原理与实现
防抖的原理是建立一个计时器。当事件触发时，我们启动计时器。当计时器到期后，如果事件没有再次触发，则执行函数。如果事件再次触发，则计时器重新开始。这样，函数只会执行一次，无论事件被触发了多少次。

以下是一个简单的 JavaScript 防抖实现：

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

三、节流的原理与实现
与防抖不同，节流关注的是在一个固定的时间间隔内只触发一次函数，无论事件被触发了多少次。节流的原理是建立一个标记来跟踪函数的执行状态。当事件触发时，如果标记为 false，则执行函数并设置标记为 true。然后，在固定的时间间隔内，标记将被重置为 false。这样，函数只会在时间间隔结束时再次执行。

以下是一个简单的 JavaScript 节流实现：

function throttle(func, delay) {
  let timer;
  let isThrottled = false;
  return function () {
    if (!isThrottled) {
      func();
      isThrottled = true;
      setTimeout(() => {
        isThrottled = false;
      }, delay);
    }
  };
}

四、选择防抖与节流
在选择防抖与节流时，需要考虑事件触发频率和所需的行为。对于那些需要立即执行且不适合延迟的事件，例如点击按钮或键盘事件，可以使用防抖。对于那些不适合频繁执行的事件，例如滚动事件或网络请求，可以使用节流。

五、结语
防抖与节流都是 JavaScript 中非常有用的工具，可以帮助优化事件处理，减少性能消耗。通过了解其原理并正确使用，您可以编写出更加流畅且响应迅速的代码。