防抖是事件停止触发一段时间后执行一次,节流是按固定间隔最多执行一次;二者均通过限制高频事件回调次数来减少计算、DOM操作和请求,提升性能。

防抖(Debounce)和节流(Throttle)是 JavaScript 中两种常用的函数执行控制技术,核心作用是减少高频事件(如 resize、scroll、input、mousemove)触发的函数调用次数,从而避免不必要的计算、DOM 操作或请求,显著提升页面响应速度和运行效率。
防抖:等你“停下来”再执行
防抖的逻辑是:只要事件持续触发,就不断重置定时器;只有当事件停止触发一段时间(比如 300ms)后,才真正执行一次函数。
- 适合场景:搜索框输入联想(用户打字停顿后再发请求)、窗口大小调整后重新布局(等用户拖完再重排)
- 关键点:最后一次触发决定是否执行,中间所有触发都被“忽略”
- 简单实现:每次调用时先清除旧定时器,再设新定时器
节流:固定节奏,“匀速”执行
节流的逻辑是:无论事件触发多频繁,函数都按固定时间间隔(比如每 100ms)最多执行一次。
- 适合场景:滚动监听做懒加载、鼠标移动轨迹采集、高频 but 需要持续反馈的操作
- 关键点:保证函数执行频率有上限,但不丢失“节奏感”
- 常见实现方式:用时间戳判断距上次执行是否超时,或用定时器开关控制
为什么能提升性能?
高频事件若不做限制,可能在 1 秒内触发几十甚至上百次回调,带来明显负担:
立即学习“Java免费学习笔记(深入)”;
加了防抖或节流后,实际执行次数可能降到个位数,CPU 和网络压力大幅下降,用户体验更顺滑。
选哪个?看需求节奏
- 要“等用户做完再说” → 选防抖(比如搜索、表单校验)
- 要“持续响应但别太密” → 选节流(比如滚动监听、游戏控制)
- 现代开发中,Lodash 的 _.debounce 和 _.throttle 可直接使用,也支持取消、立即执行等增强选项
基本上就这些。不复杂,但容易忽略——尤其在写交互效果时随手绑个 onscroll 就跑全量逻辑,性能隐患往往从这里开始。











