前端对防抖节流的理解

防抖:在一段时间内,频繁触发同一个回调函数,但是我们只需要最后一次回调函数的执行结果,此时就应该使用防抖函数。

原理:你这个回调函数此时是触发行为就立马执行,太频繁了,那么我们就给这个回调函数增加一个定时器,比如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)
}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值