惰性函数+防抖+节流

2021-08-30  本文已影响0人  Peter_2B

惰性函数:

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)
}
上一篇 下一篇

猜你喜欢

热点阅读