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

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《节流函数怎么实现，和防抖有何不同》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

节流函数确保固定时间间隔内最多执行一次，核心是记录并比较时间戳；防抖函数则在最后一次触发后延迟执行，适用于操作结束后的响应。

节流函数（Throttle）和防抖函数（Debounce）都是用来控制高频事件（比如 scroll、resize、input）触发频率的工具，但它们的触发逻辑完全不同：节流是“固定时间间隔内最多执行一次”，防抖是“最后一次触发后等待一段时间再执行”。

节流函数怎么实现

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

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

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：

• 用节流（100ms）→ 大约执行 20 次（2000 ÷ 100）；
• 用防抖（100ms）→ 只执行 1 次（最后一次触发后 100ms 执行）。

怎么选：节流还是防抖

看你的业务需求是否需要“过程反馈”：

• 要监听过程（如滚动位置、鼠标移动轨迹、实时校验）→ 选节流；
• 只关心最终结果（如搜索、提交表单、窗口 resize 完布局）→ 选防抖；
• 不确定？先用防抖，它更保守、不易出错；有卡顿或反馈缺失再换成节流。

不复杂但容易忽略：两者都需注意 this 和参数传递，推荐用 func.apply(this, args) 或箭头函数 + 展开运算符确保上下文正确。

理论要掌握，实操不能落！以上关于《节流函数实现与防抖区别详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！