函數截流和防抖

使用場景

有些時候，部分函數會高頻觸發，比如：很多網站會提供這么一個按鈕：用於返回頂部，抽象出這個功能需求-- 監聽瀏覽器滾動事件，返回當前滾條與頂部的距離。

 

function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滾動條位置：' + scrollTop);
}
window.onscroll  = showTop

 

這個函數的觸發頻率非常的高，然而實際上我們並不需要如此高頻的反饋，畢竟瀏覽器的性能是有限的，不應該浪費在這里，優化這種場景的做法就是防抖。

其他使用場景：

• 搜索框input事件，例如要支持輸入實時搜索可以使用節流方案（間隔一段時間就必須查詢相關內容），或者實現輸入間隔大於某個值（如500ms），就當做用戶輸入完成，然后開始搜索，具體使用哪種方案要看業務需求。
• 頁面resize事件，常見於需要做頁面適配的時候。需要根據最終呈現的頁面情況進行dom渲染（這種情形一般是使用防抖，因為只需要判斷最后一次的變化情況）

防抖(debounce)

 

基於上述場景，首先提出第一種思路：在第一次觸發事件時，不立即執行函數，而是給出一個期限值比如200ms，然后：

 

• 如果在200ms內沒有再次觸發滾動事件，那么就執行函數
• 如果在200ms內再次觸發滾動事件，那么當前的計時取消，重新開始計時

 

效果：如果短時間內大量觸發同一事件，只會執行一次函數。

 

實現：既然前面都提到了計時，那實現的關鍵就在於setTimeOut這個函數，由於還需要一個變量來保存計時，考慮維護全局純凈，可以借助閉包來實現：

/*
* fn [function] 需要防抖的函數
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助閉包
    return function() {
        if(timer){
            clearTimeout(timer) //進入該分支語句，說明當前正在一個計時過程中，並且又觸發了相同事件。所以要取消當前的計時，重新開始計時
            timer = setTimeOut(fn,delay) 
        }else{
            timer = setTimeOut(fn,delay) // 進入該分支說明當前並沒有在計時，那么就開始一個計時
        }
    }
}

將代碼簡化

/*****************************簡化后的分割線 ******************************/
function debounce(fn,delay){
    let timer = null //借助閉包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 簡化寫法
    }
}
// 然后是舊代碼
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滾動條位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 為了方便觀察效果我們取個大點的間斷值，實際使用根據需要來配置

到這里，已經把防抖實現了，現在給出定義：

• 對於短時間內連續觸發的事件（上面的滾動事件），防抖的含義就是讓某個時間期限（如上面的1000毫秒）內，事件處理函數只執行一次。

節流(throttle)

 

使用上面的防抖方案來處理問題的結果是：

 

• 如果在限定時間段內，不斷觸發滾動事件（比如某個用戶閑着無聊，按住滾動不斷的拖來拖去），只要不停止觸發，理論上就永遠不會輸出當前距離頂部的距離。

 

但是如果產品同學的期望處理方案是：即使用戶不斷拖動滾動條，也能在某個時間間隔之后給出反饋呢？（此處暫且不論哪種方案更合適，既然產品爸爸說話了我們就先考慮怎么實現）

我們可以設計一種類似控制閥門一樣定期開放的函數，也就是讓函數執行一次后，在某個時間段內暫時失效，過了這段時間后再重新激活（類似於技能冷卻時間）

效果：如果短時間內大量觸發同一事件，那么在函數執行一次之后，該函數在指定的時間期限內不再工作，直至過了這段時間才重新生效。

實現： 這里借助setTimeout來做一個簡單的實現，加上一個狀態位valid來表示當前函數是否處於工作狀態。

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息時間 暫不接客
           return false 
       }
       // 工作時間，執行函數並且在間隔期內把狀態位設為無效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 請注意，節流函數並不止上面這種實現方案,
   例如可以完全不借助setTimeout，可以把狀態位換成時間戳，然后利用時間戳差值是否大於指定間隔時間來做判定。
   也可以直接將setTimeout的返回的標記當做判斷條件-判斷當前定時器是否存在，如果存在表示還在冷卻，並且在執行fn之后消除定時器表示激活，原理都一樣
    */

// 以下照舊
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滾動條位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000) 

運行以上代碼的結果是：

• 如果一直拖着滾動條進行滾動，那么會以1s的時間間隔，持續輸出當前位置和頂部的距離

 

參考資料：https://segmentfault.com/a/1190000018428170