节流和防抖

1.防抖

1.1定义:一定时间内事件触发多次时只执行一次,等用户的高频操作完了以后再触发事件
1.2场景

1.  例如网页中的搜索框,检索用户输入的时候,如果用户每执行输入操作就触发事件执行检索操作的话,会造成不必要的性能浪费,防抖就是解决这类问题,在用户完成触发某事件一定时间后再执行操作。

2. 网页窗口resize不断发生改变时,使用防抖可以让高频操作变成只触发一次。

1.3原理

1.4代码
//传一个函数fn和时间(ms),用户在触发完事件time后再执行fn里的操作
function debounce(fn, time){
    let timer
    return function(){
        clearTimeout(timer)//再次触发操作要先清除先前开启的定时器
        timer = setTimeout(function(){
        fn()
        },time)
    }
}

2.节流

2.1定义:在指定时间内,高频操作只会执行一次,从触发事件开始,到规定时间结束,才能再触发事件
2.2场景

防抖存在一个问题,事件会一直等到用户完成操作后一段时间再操作,如果一直操作,会一直不触发。比如一个按钮,点击后就会发送请求,防抖中如果一直点击就不会被触发;此时就要用到节流,用户点击后立即触发发送请求事件,但是在指定时间内不会再次执行操作。

2.3原理

2.4代码 
//传一个操作函数fn和时间(ms),用户在触发事件后立即执行操作,time时间内的触发无效
function throTtle(fn, t) {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(function () {
                fn()
                //执行完操作后再给定时器赋值为null
                timer = null
            }, t)
        }
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值