节流与防抖：精细调控，高效执行**

2023-12-06 12:13:59

在前端开发中，节流（Throttle）和防抖（Debounce）是两个常用的函数修饰器，旨在优化性能并提高用户体验。两者都基于限制正在执行的 JavaScript 数量的原理，但它们的工作方式略有不同。

节流

节流函数在一定时间间隔内只允许执行一次，无论在此期间事件触发多少次。这对于处理频繁触发的事件（例如滚动或调整窗口大小）非常有用，因为它可以防止不必要的函数调用并节省计算资源。

实现节流函数的一种常见方法是使用 setTimeout 函数：

const throttle = (fn, delay) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    fn(...args);
  };
};

在这个示例中，throttle 函数接受两个参数：fn 是要节流的函数，delay 是节流的时间间隔（以毫秒为单位）。当 fn 函数被调用时，throttle 函数会检查自上次调用以来是否已经过了 delay 毫秒。如果已经过了，则调用 fn 函数并更新 lastCall 变量。否则，throttle 函数什么也不做。

防抖

防抖函数在一段时间内只执行一次，但它只在最后一次事件触发后执行。这对于处理需要一些时间才能完成的事件（例如输入搜索查询）非常有用，因为它可以防止在用户仍在输入时触发不必要的函数调用。

实现防抖函数的一种常见方法是使用 setTimeout 函数和一个 debounceTimeout 变量：

const debounce = (fn, delay) => {
  let debounceTimeout;
  return (...args) => {
    clearTimeout(debounceTimeout);
    debounceTimeout = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

在这个示例中，debounce 函数接受两个参数：fn 是要防抖的函数，delay 是防抖的时间间隔（以毫秒为单位）。当 fn 函数被调用时，debounce 函数会清除 debounceTimeout 变量并创建一个新的 setTimeout 函数。这个 setTimeout 函数会在 delay 毫秒后调用 fn 函数。如果在 delay 毫秒内 fn 函数又被调用，则 debounceTimeout 变量会被更新，而之前的 setTimeout 函数会被清除。这确保了 fn 函数只会被执行一次，并且只会在最后一次事件触发后执行。