JavaScript 函數節流和函數去抖

概念

函數防抖（debounce）

當調用動做過n毫秒後，纔會執行該動做，若在這n毫秒內又調用此動做則將從新計算執行時間

函數節流（throttle）

預先設定一個執行週期，當調用動做的時刻大於等於執行週期則執行該動做，而後進入下一個新週期

函數節流（throttle）與 函數防抖（debounce）都是爲了限制函數的執行頻次，以優化函數觸發頻率太高致使的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

 

函數防抖（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秒後準時運送一次，這個時間從第一我的上電梯開始計時，不等待，若是沒有人，則不運行。

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)
}

 

 

移動端開發的兼容問題（自我總結篇）

瀏覽器常見兼容問題以及解決辦法