函式防抖和節流都是對高頻動作觸發回撥函式的一個優化，實現方式上有類似之處。先從使用場景做個區分。

防抖使用場景：

• 表單輸入框校驗
• 提交按鈕避免重複提交

節流使用場景：

• scroll,mousemove,resize等

函式防抖（debounce）

表單輸入框校驗在使用者不停的打字輸入時並不需要向後臺校驗文字，只有當用戶停下來一定時間後，這時候預設使用者已經輸入完畢了可以開始向後臺提交文字了。

表單的提交按鈕被使用者多次連續點選時，顯然並不需要每次點選都提交表單。僅在使用者不點選之後，把最後一次的點選操作執行即可。

防抖函式的適用場景都有一個共同特點，就是高頻觸發並不會立即高頻的執行，只有在結束高頻觸發一定時間間隔之後，執行最後一次觸發。

程式碼實現就很簡單了，短時間高頻觸發則重置計時器，計時器到達指定時間後，方才執行回撥函式

var debounce = function (func, wait) {
    var timer;
    return function () {
        var self = this, args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
            func.apply(self, args);
        }, wait);
    }
}
/**
這裡使用閉包是為了儲存計時器，而不是定義一個全域性變數來存放計時器。apply的作用則是為了處理this指向和引數的傳遞，因為setTimeout會將this指向window。
*/
 

函式節流（throttle）

在觸發頻率很高的場景中，通常並不需要以同樣的高頻來執行回撥函式，這時候需要人為的控制回撥函式執行頻率，以一個固定的較低頻率來執行。

實現原理是，記錄第一次觸發時間，之後每次觸發都對比是否到達指定的間隔時間，只有大於等於指定間隔才會再次執行，並重新開始記錄觸發時間。

可以用時間戳記錄並計算出時間間隔，同樣也可以用計時器來控制時間間隔。

var throttle = function (func, wait) {
    var timer;
    return function () {
        var self = this, args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                func.apply(self, args)
                clearTimeout(timer)
                timer = null;
            }, wait)
        }
    }
}
 

最後用一張圖來對比防抖和節流函式的執行的頻率,視覺化實現

參考文件

函式防抖與函式節流-司徒正美