美文网首页
惰性函数+防抖+节流

惰性函数+防抖+节流

作者: Peter_2B | 来源:发表于2021-08-30 15:39 被阅读0次

    惰性函数:

    • 表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用的过程中,该函数被覆盖为另一个按照合适的方式执行的函数,这样对函数的调用就不用再经过原函数执行过程。
    var getTimeStamp = function(){
        
        var timeStamp = new Date().getTime();
        console.log(1);
    
        getTimeStamp = function(){
            console.log(timeStamp);
        }
    
        return getTimeStamp();
    }
    
    getTimeStamp();  
    分析:
    1.第一次执行var timeStamp &console.log(1)
    2.并将原函数重新赋值新函数 
    3.最后调用函数执行里面的函数体
    4.返回函数执行的结果
    
    
    getTimeStamp();
    1.当第二次/N次调用函数时,不会再执行var timeStamp &console.log(1)
    2.而是直接执行被赋值的新函数
    
    getTimeStamp();
    

    惰性函数的作用:

    • 一般来说,函数里的功能是不变的,但惰性函数第一次执行的时候会改变自身函数里的功能

    应用场景: 防抖 、 节流 -- 不用声明全局变量污染全局

    var btn = document.getElementById('btn');
    
    btn.onclick = debounce(function(){
        console.log( new Date().getTime() );
    }, 300);
    
    
    function debounce(cb, delay=500){
        var timer = null;
    
        debounce = function(){
            clearTimeout(timer);
            timer = setTimeout(cb, delay);
        }
    
        return debounce;
    }
    
    btn.onclick = throttle(
        function(){
            console.log(1)
        },
        1500
    );
    
    
    function throttle(cb, delay=300){
        var lastTime = new Date().getTime();
    
        throttle = function(){
            var now = new Date().getTime();
            if(now - lastTime > delay){
                cb();
                lastTime = now;
            }
        }
        return throttle;
    }
    
    var timer;          原本需要声明一个全局变量来清除timeout
    
    function debounce(cb, delay){
        clearTimeout(timer);
        timer = setTimeout(()=>{
            cb();
        },delay)
    }
    

    相关文章

      网友评论

          本文标题:惰性函数+防抖+节流

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