JavaScript 函数节流详解及方法总结

什么是函数节流？

函数节流是指限制某个函数在一定时间内只能执行一次，即使触发的次数很多。通常我们在处理一些会频繁触发的事件时，如 scroll、resize 等事件时，使用函数节流可以优化程序性能。

函数节流方法

1. 使用定时器

使用定时器是函数节流的最简单方式，使用 setTimeout 函数实现。该方式存在一个缺点，即最后一次触发事件的处理可能会被延迟执行。

代码示例：

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

// 使用示例
window.addEventListener('scroll', throttle(() => {
  console.log('scroll triggered');
}, 1000));

2. 时间戳方式

时间戳方式是在多次触发事件的情况下只执行最后一次触发事件的处理。该方式同样存在缺点，即第一次触发事件不会被处理。

代码示例：

function throttle(fn, delay) {
  let prevTime = 0;
  return function() {
    const args = arguments;
    const currentTime = +new Date();
    if (currentTime - prevTime > delay) {
      fn.apply(this, args);
      prevTime = currentTime;
    }
  }
}

// 使用示例
window.addEventListener('scroll', throttle(() => {
  console.log('scroll triggered');
}, 1000));

小结

函数节流可以优化程序性能，两种实现方式都有自己的缺点。在实际使用时应根据实际需求选择合适的方式实现。