摘要：適用情景對象的事件拖拽時的事件射擊游戲中的事件文字輸入自動完成的事件實際上對于的事件，實際需求大多為停止改變大小毫秒后執行后續處理防抖而其他事件大多的需求是以一定的頻率執行后續處理節流。

debounce（防抖）：當調用動作n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。比如：如果用手指一直按住一個彈簧，它將不會彈起直到你松手為止。
throttle（節流）：預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個新周期。比如：將水龍頭擰緊直到水是以水滴的形式流出，那你會發現每隔一段時間，就會有一滴水流出。

window對象的resize、scroll事件

拖拽時的mousemove事件

射擊游戲中的mousedown、keydown事件

文字輸入、自動完成的keyup事件

實際上對于window的resize事件，實際需求大多為停止改變大小n毫秒后執行后續處理 （防抖）；而其他事件大多的需求是以一定的頻率執行后續處理（節流）。

增加一個輔助函數 restArgs

/**
     * 類ES6 rest參數的實現,使某個函數具備支持rest參數的能力
     * @param func 需要rest參數的函數
     * @param startIndex 從哪里開始標識rest參數, 如果不傳遞, 默認最后一個參數為rest參數
     * @returns {Function} 返回一個具有rest參數的函數
     */
    var restArgs = function (func, startIndex) {
        // rest參數從哪里開始,如果沒有,則默認視函數最后一個參數為rest參數
        // 注意, 函數對象的length屬性, 揭示了函數的參數個數
        /*
         ex: function add(a,b) {return a+b;}
         console.log(add.length;) // 2
         */r
        startIndex = startIndex == null ? func.length - 1 : +startIndex;
        // 返回一個支持rest參數的函數
        return function () {
            // 校正參數, 以免出現負值情況
            var length = Math.max(arguments.length - startIndex, 0);
            // 為rest參數開辟數組存放
            var rest = Array(length);
            // 假設參數從2個開始: func(a,b,*rest)
            // 調用: func(1,2,3,4,5); 實際的調用是:func.call(this, 1,2, [3,4,5]);
            for (var index = 0; index < length; index++) {
                rest[index] = arguments[index + startIndex];
            }
            // 根據rest參數不同, 分情況調用函數, 需要注意的是, rest參數總是最后一個參數, 否則會有歧義
            switch (startIndex) {
                case 0:
                    // call的參數一個個傳
                    return func.call(this, rest);
                case 1:
                    return func.call(this, arguments[0], rest);
                case 2:
                    return func.call(this, arguments[0], arguments[1], rest);
            }
            // 如果不是上面三種情況, 而是更通用的(應該是作者寫著寫著發現這個switch case可能越寫越長, 就用了apply)
            var args = Array(startIndex + 1);
            // 先拿到前面參數
            for (index = 0; index < startIndex; index++) {
                args[index] = arguments[index];
            }
            // 拼接上剩余參數
            args[startIndex] = rest;
            return func.apply(this, args);
        };
    };

返回 function 函數的防反跳版本, 將延遲函數的執行(真正的執行)在函數最后一次調用時刻的 wait 毫秒之后. 對于必須在一些輸入（多是一些用戶操作）停止到達之后執行的行為有幫助。 例如: 渲染一個Markdown格式的評論預覽, 當窗口停止改變大小之后重新計算布局, 等等.

傳參 immediate 為 true， debounce會在 wait 時間間隔的開始調用這個函數 。在類似不小心點了提交按鈕兩下而提交了兩次的情況下很有用。

var debounce = function (func, wait, immediate) {
        var timeout, result;

        var later = function (context, args) {
            timeout = null;
            if (args) result = func.apply(context, args);
        };

        var debounced = restArgs(function (args) {
            // 一旦存在timeout， 意味之前嘗試調用過func
            // 由于debounce只認最新的一次調用， 所以之前等待執行的func都會被終止
            if (timeout) clearTimeout(timeout);
            // 如果允許新的調用嘗試立即執行，
            if (immediate) {
                // 如果之前尚沒有調用嘗試，那么此次調用可以立馬執行，否則一定得等待之前的執行完畢
                var callNow = !timeout;
                // 刷新timeout
                timeout = setTimeout(later, wait);
                // 如果能被立即執行，立即執行
                if (callNow) result = func.apply(this, args);
            } else {
                // 否則，這次嘗試調用會延時wait個時間
                timeout = delay(later, wait, this, args);
            }

            return result;
        });

        debounced.cancel = function () {
            clearTimeout(timeout);
            timeout = null;
        };

        return debounced;
    };

創建并返回一個像節流閥一樣的函數，當重復調用函數的時候，至少每隔 wait毫秒調用一次該函數。對于想控制一些觸發頻率較高的事件有幫助。

默認情況下，throttle將在你調用的第一時間盡快執行這個function，并且，如果你在wait周期內調用任意次數的函數，都將盡快的被覆蓋。如果你想禁用第一次首先執行的話，傳遞{leading: false}，還有如果你想禁用最后一次執行的話，傳遞{trailing: false}。

var throttle = function (func, wait, options) {

        var timeout, context, args, result;
        // 最近一次func被調用的時間點
        var previous = 0;
        if (!options) options = {};

        // 創建一個延后執行的函數包裹住func的執行過程
        var later = function () {
            // 執行時，刷新最近一次調用時間
            previous = options.leading === false ? 0 : new Date();
            // 清空定時器
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        };

        // 返回一個throttled的函數
        var throttled = function () {
            // ----- 節流函數開始執行----
            // 我們嘗試調用func時，會首先記錄當前時間戳
            var now = new Date();
            // 是否是第一次調用
            if (!previous && options.leading === false) previous = now;
            // func還要等待多久才能被調用 =  預設的最小等待期-（當前時間-上一次調用的時間）
            // 顯然，如果第一次調用，且未設置options.leading = false，那么remaing=0，func會被立即執行
            var remaining = wait - (now - previous);
            // 記錄之后執行時需要的上下文和參數
            context = this;
            args = arguments;

            // 如果計算后能被立即執行
            if (remaining <= 0 || remaining > wait) {
                // 清除之前的“最新調用”
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                // 刷新最近一次func調用的時間點
                previous = now;
                // 執行func調用
                result = func.apply(context, args);
                // 如果timeout被清空了，
                if (!timeout) context = args = null;

            } else if (!timeout && options.trailing !== false) {
                // 如果設置了trailing edge，那么暫緩此次調用嘗試的執行
                timeout = setTimeout(later, remaining);
            }
            return result;
        };

        // 可以取消函數的節流化
        throttled.cancel = function () {
            clearTimeout(timeout);
            previous = 0;
            timeout = context = args = null;
        };

        return throttled;
    };

點擊查看demo

參考文章
http://www.tuicool.com/articl...
http://blog.csdn.net/jinboker...
http://www.css88.com/doc/unde...