Appearance
防抖与节流:时间窗口控制与事件洪峰治理
主题边界
- 防抖和节流都用于限制高频事件处理,但控制策略不同。
- 真正要讲清的是时间窗口内,函数执行的触发条件如何被改变。
机制与流程
- 防抖会在最后一次触发后一段时间才执行,前面的触发都会取消原定执行计划。
- 节流会保证在固定时间窗口内最多执行一次,额外触发被忽略或延迟到尾部。
- 常见实现依赖闭包保存
timer、上次执行时间、尾调用参数和上下文。
关键差异
- 搜索联想、窗口 resize 收敛更适合防抖;滚动监听、拖拽位置同步更适合节流。
- leading / trailing 配置会改变首次触发和窗口结束时是否执行。
边界条件
- 没有取消能力的实现容易在组件卸载后继续触发副作用。
- 只会写
setTimeout版本还不够,真实项目里通常还要处理返回值、异常和this绑定。
工程落点
- 高频事件治理要同时考虑体验延迟和主线程负载,不能一律套某个工具函数。
- Vue / React 组件中使用这类函数时,要注意实例生命周期和闭包陈旧值问题。