防抖与节流是开发者基于事件循环和定时器主动实现的高频事件优化策略:防抖在事件停止触发后延迟执行一次,适用于搜索、校验等终态场景;节流则强制固定间隔执行一次,适用于滚动、拖拽等需持续反馈的场景。

JavaScript 本身不自动处理高频事件的堆积,而是靠开发者主动控制——核心手段就是防抖(debounce)和节流(throttle)。它们不是浏览器内置机制,而是基于事件循环和定时器(setTimeout / setInterval)构建的逻辑策略,用来“过滤”或“匀速化”事件回调的执行。
为什么高频事件容易堆积?
像 scroll、resize、mousemove 这类事件,在用户操作过程中每秒可能触发几十甚至上百次。每次触发都会把回调函数推入任务队列(宏任务队列),若回调中又含 DOM 操作、计算或请求,就极易造成:
- 调用栈频繁压入/弹出,挤占主线程资源
- 大量重排(reflow)与重绘(repaint),拖慢渲染帧率
- 短时间内发起过多网络请求,增加服务端压力
- 用户感知为页面卡顿、响应迟钝
防抖:等“安静下来”再执行
适用于只关心最终状态的场景。原理是:每次事件触发时,清除前一个定时器,重新设置延迟;只有当连续触发完全停止、且等待期满后,才真正执行一次回调。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
- 搜索框输入建议:用户打完字停顿 300ms 后才发请求
- 窗口调整结束后的布局重算
- 表单失焦时的实时校验
节流:固定节奏执行
适用于需要持续反馈但不能太密的场景。原理是:保证回调在指定时间间隔内最多执行一次,无论事件触发多频繁。
- 滚动时更新吸顶导航栏位置(如每 100ms 更新一次)
- 鼠标移动轨迹采样(避免像素级抖动)
- 上拉加载更多时限制触发频率
底层依赖的是事件循环机制
防抖和节流都依赖 JavaScript 的单线程 + 事件循环模型:
- 用
setTimeout把回调推迟到下一个宏任务阶段执行 - 利用
clearTimeout在新事件来临时取消待执行任务 - 所有逻辑都在主线程完成,不引入额外线程,但需注意避免阻塞渲染
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










