js resize、scroll函数节流与函数防抖

resize和scroll方法触发时会被频繁调用,致使页面产生性能问题,所以我们使用函数节流和函数防抖来解这个决问题

函数防抖

//scroll方法中的do somthing至少间隔500毫秒执行一次
window.addEventListener('scroll',function(){
    var timer;//使用闭包,缓存变量
    return function(){
        if(timer) clearTimeout(timer);
        timer = setTimeout(function(){
            console.log('do somthing')
        },500)
    }
}());//此处()作用 - 立即调用return后面函数,形成闭包

函数节流

//scroll方法中当间隔时间大于2s,do somthing执行一次
window.addEventListener('scroll',function(){
    var timer ;//使用闭包,缓存变量
    var startTime = new Date();
    return function(){
        var curTime = new Date();
        if(curTime - startTime >= 2000){
            timer = setTimeout(function(){
                console.log('do somthing')
            },500);
            startTime = curTime;
        }

    }
}());//此处()作用 - 立即调用return后面函数,形成闭包
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值