无需登录 数据私有 本地保存

防抖与节流可视化对比 - 事件触发频率演示

JavaScript 开发工具 可视化 节流 防抖
13
0
0
0

防抖 vs 节流 · 事件触发频率演示

直观对比 Debounce（防抖）与 Throttle（节流）在事件处理中的行为差异。理解何时使用防抖、何时使用节流，优化前端性能。

时间窗口：6秒 实时对比
300 ms
50ms (极短) 1000ms (长延迟)
提示：观察三条轨道中触发标记（灰色点）与执行标记（彩色大点）的数量差异
Normal 执行 0
Debounce 执行 0
Throttle 执行 0
Normal · 无控制
事件触发
0
实际执行
0
每次触发都立即执行，无任何限制
Debounce · 防抖
事件触发
0
实际执行
0
停止触发后等待延迟才执行，连续触发会重置计时
Throttle · 节流
事件触发
0
实际执行
0
固定间隔执行，首次立即执行，冷却期内忽略触发
执行效率对比
模式 总触发次数 总执行次数 执行率 节省调用 适用场景
Normal 0 0 100% 0 次 需要实时响应的场景
Debounce 0 0 0% 0 次 搜索建议、窗口resize、表单验证
Throttle 0 0 0% 0 次 滚动加载、按钮防重复提交、游戏帧率
触发标记（灰色小点）
Normal 执行
Debounce 执行
Throttle 执行
时间轴（右→左，6秒窗口）

防抖与节流 · 核心知识点

🔍 什么是防抖（Debounce）？

防抖的核心思想是"等你停下来再说"。当事件被连续触发时，防抖会不断重置计时器，只有在事件停止触发且经过了指定延迟时间后，回调函数才会执行一次。典型应用场景：搜索框输入建议、窗口大小调整后的重新布局。

⚡ 什么是节流（Throttle）？

节流的核心思想是"按固定节奏来"。无论事件触发多频繁，节流保证回调函数在每个指定的时间间隔内最多执行一次。首次触发通常立即执行（leading edge）。典型应用场景：滚动事件加载更多、按钮防重复点击、游戏中的帧率控制。

🤔 什么时候用防抖，什么时候用节流？

用防抖：当你关心"最终结果"，不关心中间过程。比如用户输入搜索词，你只关心他最终输入了什么。
用节流：当你需要"持续但不过度"的反馈。比如页面滚动时检查是否要加载更多内容，需要定期检查但不能太频繁。

📊 防抖和节流的延迟时间怎么选？

搜索建议：200-400ms（平衡响应与性能）
窗口resize：150-300ms（避免频繁重绘）
滚动加载：100-250ms（保持流畅体验）
按钮防重复：500-1000ms（防止误操作）
游戏输入：16-33ms（配合60fps刷新率）

💡 防抖的leading和trailing模式是什么？

Trailing（尾部执行）：事件停止触发后等待delay再执行，这是最常见的防抖模式。
Leading（头部执行）：首次触发立即执行，然后忽略后续连续触发直到停止。Lodash等库同时支持两种模式，甚至可以在首尾都执行。

🛠 节流可以使用requestAnimationFrame吗？

可以！对于动画和渲染相关的场景，requestAnimationFrame是更好的节流方式，它能自动同步到浏览器刷新率（约60fps）。但对于网络请求、状态更新等非渲染场景，使用时间戳的节流更合适，可以自定义更长的间隔来减少请求频率。

记忆口诀： 防抖是"等你停下来"（电梯关门——有人进来就重新等）；节流是"定时发车"（公交班车——到点就走，不管多少人）。
🔧 相关工具