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

来源:互联网 发布:最优化求解过程 编辑:程序博客网 时间:2024/04/30 09:03

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后面函数,形成闭包
0 0