防抖（debounce）：一段時間之后才執(zhí)行某個函數(shù)
節(jié)流（throttle）：一段時間之內(nèi)執(zhí)行某個函數(shù)

防抖（debounce）： 主要是利用計時器實現(xiàn)；為了不污染全局變量，利用閉包，共享一個計時器變量，返回一個新的函數(shù)

myPlugin.debounce = function (callback, time) {
    var timer;
    return function () {
        clearTimeout(timer);//清除之前的計時
        timer = setTimeout(function () {
            callback();
        }, time);
    }
}

完善一下如果要傳入?yún)?shù)的情況

myPlugin.debounce = function (callback, time) {
    var timer;
    return function () {
        clearTimeout(timer);//清除之前的計時
        var args = arguments; //利用閉包保存參數(shù)數(shù)組
        timer = setTimeout(function () {
            callback.apply(null, args);
        }, time);
    }
}

如何使用

   <script src="debounce的js路徑"></script>
    <script>
        var handle = myPlugin.debounce(function(width) {
            console.log(width);
        }, 1000);
        window.onresize = function() {
            handle(document.documentElement.clientWidth);
        }
    </script>

節(jié)流（throttle）： 節(jié)流有兩種做法，一種是利用計時器，等某段時候之后才執(zhí)行并且在在段時間內(nèi)不回重新計時；另外一種是利用時間戳，該立即執(zhí)行，下一次執(zhí)行需要等待

第一種方法

myPlugin.throttle = function (callback, time) {
    var timer;
    return function () {
        // 如果當(dāng)前有計時，直接renturn
        if (timer) {
            return;
        }
        var args = arguments; //利用閉包保存參數(shù)數(shù)組
        timer = setTimeout(function () {
            callback.apply(null, args);
            timer = null; //函數(shù)執(zhí)行完要立馬清空計時器，否則將無法進(jìn)行下一次執(zhí)行
        }, time);
    }
}

第二種方法

myPlugin.throttle = function (callback, time) {
    var t;
    return function () {
        if (!t || Date.now() - t >= time) { //之前沒有計時 或 距離上次執(zhí)行的時間已超過規(guī)定的值
            callback.apply(null, arguments);
            t = Date.now(); //得到的當(dāng)前時間戳
        }
    }
}

所以我們可以統(tǒng)一一下

myPlugin.throttle = function (callback, time, immediately) {
    if (immediately === undefined) {
        immediately = true;
    }
    if (immediately) {
        var t;
        return function () {
            if (immediately) {
                if (!t || Date.now() - t >= time) { //之前沒有計時 或 距離上次執(zhí)行的時間已超過規(guī)定的值
                    callback.apply(null, arguments);
                    t = Date.now(); //得到的當(dāng)前時間戳
                }
            }
        }
    }
    else {
        var timer;
        return function () {
            // 如果當(dāng)前有計時，直接renturn
            if (timer) {
                return;
            }
            var args = arguments; //利用閉包保存參數(shù)數(shù)組
            timer = setTimeout(function () {
                callback.apply(null, args);
                timer = null; //函數(shù)執(zhí)行完要立馬清空計時器，否則將無法進(jìn)行下一次執(zhí)行
            }, time);
        }
    }
}

如何使用

    <script>
        function test() {
            console.log("a");
        }
        var handle = myPlugin.throttle(test, 1000, false);
        window.onresize = function(){
            handle();
        }
    </script>