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

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

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

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

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

怎样实现节流函数_它和防抖有什么区别

节流函数（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：