引言：

防抖和節流，無論是在面試還是在實際作業中，都是一個常會涉及到的問題，

甚至在面試中，存在出現手撕防抖節流函式的可能性，

本人提倡用最精簡的方式，淺顯易懂漲知識，至少用兩分鐘看完本文能夠了解它是誰，

1.防抖

概念：

防抖：持續觸發事件時！

若一定時間段內沒觸發事件則執行，

若一定時間段內觸發了事件則重新計時，

應用場景：

1.模糊搜索：（為了降低帶寬消耗，減少請求次數，在模糊搜索/聯想查詢業務中會用到防抖，）

2.王者榮耀回城效果：（類似防抖程序的例子，我點擊取消回城就取消，不點擊它就繼續執行）

實作：

HTML代碼：

<input type="text" id="inputText">

JavaScript代碼：

 1 /* 防抖函式 */
 2     function debounce(func, delayTime) {
 3         var timer = null; // 初始化timer變數 并且保持timeout變數不被釋放
 4         return function() {
 5             if (timer) {
 6                 clearTimeout(timer); //清除延時器
 7             }
 8             timer = setTimeout(func, delayTime);
 9         }
10     }
11     /* 處理函式 */
12     function deal() {
13         console.log("ajax");
14     }
15 
16     var inputText = document.getElementById('inputText');
17     inputText.addEventListener('keyup', debounce(deal, 1000));

效果：

在輸入框輸入“jimmy”，并不會列印5個“ajax”，而是輸入最后一個字符延遲一秒后，才會輸出，若連續輸出，輸入上個字符的keyup事件的延遲會重置，

2.節流：

概念：

節流：持續觸發事件時！

一段時間內只呼叫一次事件處理函式，

應用場景：

1.驗證碼倒計時：（登錄注冊頁面中，這種業務很常見，目的是為了防止用戶頻繁點擊，造成頻繁請求，采用節流解決，）

2.各大游戲技能CD冷卻：（同樣是典型的例子，冷卻CD的作用就是不希望玩家頻繁釋放技能，）

3.滾動事件監聽：（如果監聽到滾動條滾動，而執行事件的話，會頻繁執行，所以采用節流，大大減少資源浪費，）

實作：

HTML代碼：

<button id="shoot">發射</button>

JavaScript代碼：

/* 節流函式 */
    function throttle(func, delay) {
        var timer = null;
        return function() {
            var that = this;
            var args = arguments;
            if (!timer) {
                timer = setTimeout(function() {
                    timer = null;
                    func.apply(that, args)
                }, delay)
            }
        }
    }

    function deal() {
        console.log("砰！");
    };

    var btn = document.getElementById('shoot');
    btn.onclick = throttle(deal, 2000);