17370845950

throttle 是固定间隔最多执行一次，debounce 是停止触发后延迟执行一次；二者解决不同问题，不可互换，需按场景选型并注意 this、参数传递及定时器清理。

throttle 是让函数在固定时间间隔内**最多执行一次**的控制机制；debounce 是让函数在事件“停止触发”后，**延迟执行一次**。它们不是替代关系，而是解决两类不同问题的工具。

节流怎么写？关键在「锁住 + 重置」

最简可用的 throttle 实现依赖一个开关（inThrottle）和一个定时器来解锁：

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

• 每次调用都先检查 inThrottle 是否为 false，只有未锁定时才执行
• setTimeout 不是“延迟执行”，而是“延迟解锁”，真正执行发生在调用瞬间
• 如果事件持续高频触发（比如 scroll），它会按 limit 周期稳定输出，比如每 100ms 最多跑一次
• ⚠️ 注意：这个版本不保证首次/末次一定执行——如果用户快速滚动后立刻停下，最后一次可能被跳过

防抖为什么不能代替节流？看输入 vs 滚动场景

你不能用 debounce 替代 throttle 处理滚动加载，因为语义完全不同：

• debounce(fn, 300)：用户停下滑动 300ms 后才执行一次 —— 适合搜索框，等用户“打完字”再查
• throttle(fn, 300)：不管用户滑得多快，每 300ms 至少执行一次 —— 适合懒加载，确保滚动中及时判断是否触底
• 用防抖做滚动监听 → 用户快速滚到底部，但没停稳，fn 根本不触发，加载失败
• 用节流做搜索框 → 用户还在输入，就已发了请求，浪费接口、返回错结果

真实项目里，参数选多少才不卡也不丢？

没有通用值，得看场景和设备性能：

• resize 事件：通常 100–250ms 足够，太短无意义，太长会让布局响应迟钝
• scroll 滚动监听（含懒加载）：建议 16–100ms，16ms ≈ 60fps 渲染帧率，能匹配屏幕刷新节奏
• mousemove：若用于拖拽反馈，可设 16ms；若只是记录轨迹，50–100ms 更省资源
• ⚠️ 别硬写死数字：移动端 touchmove 触发更密集，PC 端 mousemove 可能更稀疏，考虑用 requestAnimationFrame 替代 setTimeout 做更精准的节流

容易被忽略的细节：this 和 arguments 的丢失

所有手写 throttle 或 debounce，只要没显式绑定上下文，就会在事件回调中丢失 this 和参数：

立即学习“Java免费学习笔记（深入）”；

• 错误写法：throttle(handler, 100)(e) → handler 里的 this 是 window，e 不会被传入
• 正确写法：必须用 func.apply(context, args) 或现代写法 func.call(context, ...args)
• Vue/React 中还要注意组件卸载后定时器未清除 → 内存泄漏 + 报错 Cannot perform a React state update on an unmounted component

真正难的不是写出一个能跑的 throttle，而是在滚动中不丢帧、在 resize 后不卡顿、在用户切页前把定时器清干净——这些边界比函数签名重要得多。