區別

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);        };    };
debounce
返回 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;    };
throttle
創建并返回一個像節流閥一樣的函數，當重復調用函數的時候，至少每隔 wait毫秒調用一次該函數。對于想控制一些觸發頻率較高的事件有幫助。（愚人碼頭注：詳見：javascript函數的throttle和debounce，感謝 @澳利澳先生 的翻譯建議）
默認情況下，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;    };