防抖和节流的区别是什么?如何选择?
请对比防抖(Debounce)和节流(Throttle)的区别,以及在什么场景下选择哪种方案。
回答
Yahuda
区别:
| 特性 | 防抖(Debounce) | 节流(Throttle) |
|---|---|---|
| 执行策略 | 连续触发中只执行最后一次 | 固定间隔执行一次 |
| 执行时机 | 停止触发后执行(或首次立即) | 每隔一段时间执行一次 |
| 频率控制 | 控制触发后延迟执行 | 保证执行频率不超过阈值 |
| 举例行为 | 电梯等人,最后一个人进才关门 | 游戏技能冷却,CD 内不能释放 |
选择指南:
✅ 用防抖:用户结束操作后才需处理的场景
- 搜索输入联想(用户停止输入后才请求)
- 窗口 resize 结束后的重绘
- 表单验证(用户输入完成后再校验)
- 自动保存草稿
✅ 用节流:持续触发需要稀释频率的场景
- 滚动事件(无限加载、滚动监听)
- 鼠标移动(拖拽、绘制)
- 页面滚动时的导航高亮
- 按钮点击频率限制(抽奖、抢购)
- 窗口 resize 中的实时布局调整
同时使用:"搜索联想 + 关键词建议" 可以用节流限制请求频率 + 防抖避免最后一次输入前发送无用请求。