美文网首页
JavaScript-函数节流与函数防抖

JavaScript-函数节流与函数防抖

作者: Cola丶ZYQ | 来源:发表于2017-12-27 15:13 被阅读0次

    有时候我们在做某些功能的时候,本身只想让触发一次,but 会执行多次。如: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后面函数,形成闭包
    

    相关文章

      网友评论

          本文标题:JavaScript-函数节流与函数防抖

          本文链接:https://www.haomeiwen.com/subject/cseugxtx.html