防抖與節流

概念

函數節流和函數防抖，二者都是優化高頻率執行js代碼的一種手段。

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

函數節流（throttle）

函數節流是指必定時間內執行的操做只執行一次，也就是說即預先設定一個執行週期，當調用動做的時刻大於等於執行週期則執行該動做，而後進入下一個新週期。
節流：必定時間段內只執行一次

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 處理函數
function handle() {   
    console.log(Math.random());
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

函數防抖（debounce）

函數防抖是指在必定時間內，在動做被連續頻繁觸發的狀況下，動做只會被執行一次，也就是說當調用動做過n毫秒後，纔會執行該動做，若在這n毫秒內又調用此動做則將從新計算執行時間，因此短期內的連續動做永遠只會觸發一次。
防抖：間隔超過必定時間後纔會執行

時間戳

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));

定時器

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));