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

惰性函数+防抖+节流

作者: 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