淺顯易懂的防抖和節流，兩分鐘理解

引言：

防抖和節流，不管是在面試仍是在實際工做中，都是一個常會涉及到的問題。

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

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

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);

效果：

　　點「發射」按鈕，延遲一秒輸出，若在這一秒鐘連續點擊，則只會執行一次。

         

3.總結：

以下圖所示：

防抖：一個事件開始執行，若過程當中在m時刻打斷，則時間從頭開始計算；不然順序執行。

節流：一個事件開始執行，若在一個觸發點觸發事件，則通過Tx時間段才能繼續觸發(x=1,2,3,4,...)。

 

原創地址：http://www.javashuo.com/article/p-sztyxdui-mg.html