JavaScript 函数节流：两种实现方式详解

函数节流是一种常用的优化技术，用于限制函数在一定时间内只执行一次。这对于处理频繁触发的事件（如滚动、拖动、输入等）非常有用，可以避免不必要的性能消耗。

本文将介绍两种常用的 JavaScript 函数节流实现方法：

方法一：使用 setTimeout 延迟执行函数

function throttle(fn, delay) {
  let timerId = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timerId) {
      timerId = setTimeout(function() {
        fn.apply(context, args);
        timerId = null;
      }, delay);
    }
  };
}

使用示例：

function myFunction() {
  console.log('执行了 myFunction');
}

const throttledFunction = throttle(myFunction, 1000);

throttledFunction(); // 在 1000ms 后执行 myFunction
throttledFunction(); // 不会立即执行 myFunction
throttledFunction(); // 不会立即执行 myFunction

该方法通过 setTimeout 延迟执行函数，确保在一定时间内只执行一次。当函数被调用时，如果 timerId 为空，则设置一个定时器，在 delay 时间后执行函数并将 timerId 设置为空。如果 timerId 不为空，则函数不会立即执行。

方法二：使用时间戳判断是否执行函数

function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(context, args);
      lastTime = now;
    }
  };
}

使用示例：

function myFunction() {
  console.log('执行了 myFunction');
}

const throttledFunction = throttle(myFunction, 1000);

throttledFunction(); // 立即执行 myFunction
throttledFunction(); // 在 1000ms 后执行 myFunction
throttledFunction(); // 在 1000ms 后执行 myFunction

该方法通过时间戳记录函数上次执行的时间，当两次调用函数的时间间隔大于 delay 时，才执行函数。

总结：

使用 setTimeout 的方法比较简单，但可能导致函数在事件触发后延迟执行，尤其是在事件频繁触发的情况下。
使用时间戳的方法可以确保函数在事件触发后立即执行，但需要记录函数上次执行的时间。

选择哪种方法取决于你的具体需求。