節流函數和防抖函數

節流函數

節流即throttle,規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，若是在同一個單位時間內某事件被觸發屢次，只有一次能生效。

function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        var context = this
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.call(context, arguments);
            canRun = true;
        }, interval);
    };
}
複製代碼

防抖函數

debounce 函數防抖是指頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次。好比坐電梯門要關了，結果有我的又要進來，電梯門就須要從新開關，想象若是有10我的陸陸續續進來，電梯門就會開開關關屢次，這樣的話還不如固定時間關一次門，用來節省消耗。

function debounce(method,time){
    var timer = null ;
    return function(){
        var context = this;
        //在函數執行的時候先清除timer定時器;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.call(context, arguments);
        },time);
    }
}
複製代碼