JavaScript-面试-防抖与节流
2026年10月16日·Admin·2 次浏览
面试题:防抖 debounce 与节流 throttle 区别?应用场景?
防抖 debounce
连续触发只认最后一次:在事件停止触发 wait ms 后才执行;若 wait 内再次触发则重新计时。
场景:搜索框输入联想、窗口 resize 结束后计算布局、表单提交防连点。
节流 throttle
固定时间窗口内最多执行一次(领先/ trailing 可配置)。
场景:滚动监听、鼠标移动、播放进度类高频事件,降低执行频率保流畅。
原理要点
二者都用 闭包保存计时器或上次时间戳;this 与事件对象需用 apply/call 或箭头词法绑定正确传递。
对比一句
- 防抖:等人停手再干活。
- 节流:每隔固定时间最多干一次。