js截流实现

截流（Throttle）的概念

截流是一种控制函数执行频率的技术，确保函数在特定时间间隔内只执行一次。常用于优化高频事件（如滚动、输入）的性能。

基础实现

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

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

包含尾部调用版本

确保最后一次触发会被执行：

function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;

  return function(...args) {
    const now = Date.now();
    const remaining = delay - (now - lastTime);

    clearTimeout(timer);

    if (remaining <= 0) {
      fn.apply(this, args);
      lastTime = now;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args);
        lastTime = Date.now();
      }, remaining);
    }
  };
}

使用场景示例

滚动事件优化：

window.addEventListener('scroll', throttle(() => {
  console.log('处理滚动逻辑');
}, 200));

与防抖（Debounce）的区别

• 截流：固定时间间隔执行（如每200ms）
• 防抖：停止触发后延迟执行（如输入停止500ms后）

现代浏览器原生支持

部分浏览器已支持requestIdleCallback：

window.requestIdleCallback(() => {
  // 空闲时执行的任务
});

注意事项

• 时间间隔不宜过短（建议≥16ms，对应60fps）
• 在React等框架中可能需要使用useCallback包裹
• 清除定时器避免内存泄漏