CodeWalk

防抖和节流的区别是什么?如何选择?

作者:Yahuda · 2026-05-30 12:55

请对比防抖(Debounce)和节流(Throttle)的区别,以及在什么场景下选择哪种方案。

回答

Yahuda

区别

特性防抖(Debounce)节流(Throttle)
执行策略连续触发中只执行最后一次固定间隔执行一次
执行时机停止触发后执行(或首次立即)每隔一段时间执行一次
频率控制控制触发后延迟执行保证执行频率不超过阈值
举例行为电梯等人,最后一个人进才关门游戏技能冷却,CD 内不能释放

选择指南

用防抖:用户结束操作后才需处理的场景

  • 搜索输入联想(用户停止输入后才请求)
  • 窗口 resize 结束后的重绘
  • 表单验证(用户输入完成后再校验)
  • 自动保存草稿

用节流:持续触发需要稀释频率的场景

  • 滚动事件(无限加载、滚动监听)
  • 鼠标移动(拖拽、绘制)
  • 页面滚动时的导航高亮
  • 按钮点击频率限制(抽奖、抢购)
  • 窗口 resize 中的实时布局调整

同时使用:"搜索联想 + 关键词建议" 可以用节流限制请求频率 + 防抖避免最后一次输入前发送无用请求。