当前位置：首页 > 文章列表 > 文章 > 前端 > 节流函数实现与防抖区别详解

节流函数实现与防抖区别详解

2026-01-04 10:18:39 0浏览收藏

节流函数怎么实现

核心思路是：记录上一次执行的时间戳，每次触发时判断距离上次执行是否已超过设定的延迟；如果超过，就执行函数并更新时间戳；否则不执行。

一个简单可靠的实现如下：

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

使用示例：

window.addEventListener('scroll', throttle(() => {
  console.log('滚动被节流了');
}, 100)); // 每100ms最多执行一次

注意：这种写法在首次触发时会立即执行（因为 lastTime 初始为 0），适合大多数场景。若需首次也延迟，可改用定时器方式（见下文进阶说明）。

节流的定时器版本（可选进阶）

有些场景需要严格按固定间隔执行（比如动画帧同步），可以用定时器控制，确保“至少 delay 时间后才允许下一次执行”：

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

这个版本首次触发不会立刻执行，而是等 delay 后再执行第一次，之后每 delay 时间执行一次。适合对执行时机要求更严格的场景。

节流和防抖的本质区别

关键不在“怎么写”，而在“什么时候执行”：

节流：像公交车——每 N 秒发一班车，不管中途有没有人上车，到点就走。适合需要持续反馈但不能太密的场景，比如滚动时实时计算可视区域。
防抖：像电梯关门——每次有人进来就重置倒计时，直到没人按按钮且过了 N 秒才关门。适合“等用户操作完全结束再响应”的场景，比如搜索框输入后发请求、窗口大小调整完再重排版。

举个对比例子：用户快速拖拽滚动条 2 秒，触发 100 次 scroll：