防抖:在一段时间内,频繁触发同一个回调函数,但是我们只需要最后一次回调函数的执行结果,此时就应该使用防抖函数。
原理:你这个回调函数此时是触发行为就立马执行,太频繁了,那么我们就给这个回调函数增加一个定时器,比如3秒钟,在3秒内,如果客户没有继续触发这个回调函数,那么直接执行该回调函数,如果客户在3秒内再次触发了这个回调函数,那么就清空这个定时器重新开启定时器,反之就是不让你执行哎,一直到你不3秒钟内不再次触发行为为止。
代码:
debounce(fn,delay){
let timer = null
return function(fn,delay){
if(timer) clearTimeout(timer)
timer = setTimeout(fn,delay)
}
}
节流:在一段时间内,频繁触发同一个回调事件,我想要这个回调事件有个cd,每隔一段时间才能调用一次,这个时候就用节流。
原理:现在是一旦触发该行为就会立刻立马马上的调用该回调函数,但我想这个回调函数有个cd,在cd冷却过程中,不允许客户回调这个函数,这个时候需要一个变量来判断回调函数的状态,如果这个变量正在工作可以调用,这个状态就设置为true,如果状态改为false,就证明这个回调函数进入了cd时间,不允许再使用了
代码:
throttle(fn,delay){
let valid = true
return function(fn,delay){
if(!valid)
{
return false
}
valid = false
setTimeout(()={
fn()
valid = true
},delay)
}
}