更多个人博客:(https://github.com/zenglinan/blog)
如果对你有帮助,欢迎star。
函数节流与函数防抖类似, 也是为了限制事件的频繁触发执行
不同的是: 防抖的原理是, 触发完指定时间内不触发才会执行事件, 如果一直触发就会一直刷新时间戳
节流的原理是, 指定时间执行一次事件函数
既然是指定时间触发执行一次, 那么节流就可以用至少两种方式实现: 时间戳, 定时器
时间戳版
利用当前时间减去上一次触发时间, 假如到达了设置的周期就执行
function throttle(fn, wait){
let time = 0
return function(){
let now = +new Date() // 转为数字
let args = arguments
if(now - time > wait){
fn.apply(this, args)
time = now // 刷新time
}
}
}
时间戳版可以做到马上触发执行一次事件, 但假如时间周期为 3s, 在 2.8s 的时候离开, 即将可以执行(差 0.2s )的第二次事件将不能执行, 简称有头无尾。
使用方法:
app.onmousemove = throttle(xxx, 1000)
定时器版
function throttle(fn, wait) {
let timer // 是否执行的标志位
return function() {
let args = arguments
!timer && (timer = setTimeout(() => { // timer 标志位为 falsy 时设置定时器, 将 timer 置数, 指定时间后执行事件函数, 并刷新 timer 标志位。
timer = null
fn.apply(this, args)
}, wait))
}
}
定时器版由于事件函数是放在定时器里执行的, 所以第一次触发不能马上执行, 但是离开时, 由于定时器还在, 可以保证最后一次触发还在, 简称有头无尾。
网友评论