怎样实现节流函数_它和防抖有什么区别-js教程-PHP中文网

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

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

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