節流與防抖

閒來無事在網上翻一些關於 Javascript 的一些搞基技巧，就發現了節流與防抖這兩種設計模式。

上個星期在編寫搜索框的時候就已經寫過類似的代碼 （搜索框輸入關鍵詞會實時去服務器上搜索，考慮到服務器壓力就把代碼加了限制，每 500ms 最多搜索一次，實際上這就是類似防抖的設計，只是我還不知道這個叫防抖…）

下面是搜索框的限制代碼：

1watch(searchText, (newVal) => {
2    clearTimeout(searchTimer);
3    searchTimer = setTimeout(
4        () => //...需要限制的邏輯
5            ),
6        500
7    );
8});

原理非常簡單，通過定時器實現，一旦現有狀態改變就說明有新的輸入，然後清除老的定時器，新設置定時器。

今天在網上衝浪又學到了一種新的設計：節流

直接看代碼吧：

 1watch(searchText, (newVal) => {
 2
 3    if(isStop) {
 4        return
 5    }
 6
 7    isStop = true;
 8
 9    setTimeout(
10        () => {
11            //...需要限制的邏輯
12            isStop = false
13        }
14    ),
15    500
16);

emmm，一開始看了半天，實際上看懂之後節流比防抖更加簡單 （好吧，看了幾遍其實發現差不多）

原理還是一樣簡單，計數器結束將標誌位設置為 false，這樣新來的計時器就能通過，如果沒到限制時間就進入這個函數會被標誌位攔住，直接返回。

節流主要作用就是限制執行頻率。

硬要說防抖和節流的區別。。。emm我也說不上來，看應用場景吧。