Skip to content

手写节流

来源:js/实现/节流.html,手写实现 throttle —— 持续触发事件,每隔一段时间只执行一次。

速查导航


节流是什么

持续触发事件,每一段时间只触发一次

典型场景:scrollresizemousemove 等高频事件。


定时器版

使用 setTimeout 实现,第一次触发后等待 wait 时间才执行:

定时器版特点: 第一次触发后延迟 wait 才执行,停止触发后还会再执行一次。


时间戳版

使用时间差判断,第一次触发立即执行:

时间戳版特点: 第一次触发立即执行,停止触发后不会再执行。


对比

方案首次触发停止后适用场景
定时器版延迟 wait 执行还会执行一次鼠标移入动画
时间戳版立即执行不再执行滚动加载、resize

完整版可以结合两者:首次立即执行 + 停止后再执行一次,兼顾两种场景。