Appearance
手写节流
来源:
js/实现/节流.html,手写实现throttle—— 持续触发事件,每隔一段时间只执行一次。
速查导航
节流是什么
持续触发事件,每一段时间只触发一次。
典型场景:scroll、resize、mousemove 等高频事件。
定时器版
使用 setTimeout 实现,第一次触发后等待 wait 时间才执行:
定时器版特点: 第一次触发后延迟
wait才执行,停止触发后还会再执行一次。
时间戳版
使用时间差判断,第一次触发立即执行:
时间戳版特点: 第一次触发立即执行,停止触发后不会再执行。
对比
| 方案 | 首次触发 | 停止后 | 适用场景 |
|---|---|---|---|
| 定时器版 | 延迟 wait 执行 | 还会执行一次 | 鼠标移入动画 |
| 时间戳版 | 立即执行 | 不再执行 | 滚动加载、resize |
完整版可以结合两者:首次立即执行 + 停止后再执行一次,兼顾两种场景。