1. 定义
1,当持续触发事件时,在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件,则什么也不做,也不会重置定时器.
2. 使用场景
基础条件:
1,客户连续频繁地触发事件
2,客户不再只关心"最后一次"操作后的结果反馈.而是在操作过程中持续的反馈.稀释触发频率
例如:
一鼠标事件mousemove,窗口缩放事件onsize,滚动条事件onscroll等一些用户'一次'操作导致多次事件触发。
3. 实现方式
1,通过时间戳的形式:通过记录事件触发的第一次的时间戳,然后在规定的n秒后,才让它继续触发。
/*
*@param cb需要处理的函数/事件
*@param n函数/事件稀释的次数
*/
function throttle(cb,n){
let prev = new Date().getTime()
return function (args){
let that = this
let content = args
let next = new Date().getTime()
if(n < next - now){
cb.apply(that,content) //cb.call(that,[...args])
prev = next
}
}
}
2,通过定时器的形式:
1)立即执行
function throttle(cb,n){
let lock = false
return function (args){
let that = this
let content = args
if(!lock){
cb.apply(that,args)
lock=true
setTimeout(()=>{
lock=false
},n)
}
}
}