函數防抖與函數節流

前言

有一些瀏覽器事件我們不希望它很頻繁的觸發，如調整窗口大小(onresize)、監聽滾動條滾動(onscroll)，如果這些監聽事件需要調用接口的話一秒內可能會調用上百次，這樣坑定是有問題的。

 

 

函數防抖（debounce）

如果有人進電梯（觸發事件），那電梯將在10秒鍾后出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

function debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function log(){
    console.log(1)
}

window.addEventListener('scroll', debounce(log, 1000));

 

 

 

函數節流（throttle）

保證如果電梯第一個人進來后，10秒后准時運送一次，這個時間從第一個人上電梯開始計時，不等待，如果沒有人，則不運行。

仔細想想，上面的防抖方式還是有一定的缺點。如果頁面很長，我們一直在滾動頁面，那log方法就一直不會被執行。所以我們可以升級一下上述的防抖方法。

function throttle(fn,wait,time){
    var previous = null; //記錄上一次運行的時間
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //當上一次執行的時間與當前的時間差大於設置的執行間隔時長的話，就主動執行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 執行函數后，馬上記錄當前時間
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function log(){
    console.log(1)
}

window.addEventListener('scroll', throttle(log, 1000, 2000));