白狗子的博客

「天上浮云如白衣,斯须改变如苍狗。」——杜甫

JavaScript-面试-防抖与节流

2026年10月16日·Admin·2 次浏览

面试题:防抖 debounce 与节流 throttle 区别?应用场景?

防抖 debounce

连续触发只认最后一次:在事件停止触发 wait ms 后才执行;若 wait 内再次触发则重新计时。

场景:搜索框输入联想、窗口 resize 结束后计算布局、表单提交防连点。

节流 throttle

固定时间窗口内最多执行一次(领先/ trailing 可配置)。

场景:滚动监听、鼠标移动、播放进度类高频事件,降低执行频率保流畅。

原理要点

二者都用 闭包保存计时器或上次时间戳;this 与事件对象需用 apply/call 或箭头词法绑定正确传递。

对比一句

  • 防抖:等人停手再干活。
  • 节流:每隔固定时间最多干一次。

© 2025 My Blog. Built with Nuxt.js v4