JS中的函數防抖

JS中的函數防抖

1、什麼是函數防抖

概念：函數防抖（debounce），就是指觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。

舉個栗子，坐電梯的時候，若是電梯檢測到有人進來（觸發事件），就會多等待 10 秒，此時若是又有人進來（10秒以內重複觸發事件），那麼電梯就會再多等待 10 秒。在上述例子中，電梯在檢測到有人進入 10 秒鐘以後，纔會關閉電梯門開始運行，所以，「函數防抖」的關鍵在於，在 一個動做 發生 必定時間 以後，才執行 特定事件。

2、爲何須要函數防抖

　　前端開發過程當中，有一些事件，常見的例如，onresize，scroll，mousemove ,mousehover 等，會被頻繁地觸發，不作限制的話，有可能一秒以內執行幾十次、幾百次，若是在這些函數內部執行了其餘函數，尤爲是執行了操做 DOM 的函數（瀏覽器操做 DOM 是很耗費性能的），那不只會形成計算機資源的浪費，還會下降程序運行速度，甚至形成瀏覽器卡死、崩潰。這種問題顯然是致命的。

除此以外，重複的 ajax 調用不只會形成數據關係的混亂，還會形成網絡擁塞，增長服務器壓力，顯然這個問題也是須要解決的。

3、函數防抖如何解決上述問題

根據上面對問題的分析，細細思索，能夠想到以下解決方案。

函數防抖的要點，也是須要一個 setTimeout 來輔助實現。延遲執行須要跑的代碼。若是方法屢次觸發，則把上次記錄的延遲執行代碼用 clearTimeout 清掉，從新開始。若是計時完畢，沒有方法進來訪問觸發，則執行代碼。

4、函數防抖的代碼實現

根據以上分析，咱們對「函數防抖」進行代碼實現，以下：

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

以上方法本人親測有效，小夥伴們可放心食用（注意，函數觸發方式爲「 resize 」，改變窗口大小，觀察瀏覽器控制檯的變化）。

5、函數節流的使用場景

函數防抖通常用在什麼狀況之下呢？通常用在，連續的事件，只需觸發一次回調的場景具體有：

1. 搜索框搜索輸入。只需用戶最後一次輸入完，再發送請求
2. 手機號、郵箱驗證輸入檢測
3. 窗口大小 resize。只需窗口調整完成後，計算窗口大小，防止重複渲染。

目前遇到過的用處就是這些了，理解了思路，小夥伴能夠把它運用在適當的場合，提升代碼質量。

總結

函數防抖實際上是分爲 「當即執行版」 和 「非當即執行版」 的，根據字面意思就能夠發現他們的差異，所謂當即執行版就是 觸發事件後函數不會當即執行，而是在 n 秒後執行，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。 而 「非當即執行版」 指的是 觸發事件後函數會當即執行，而後 n 秒內不觸發事件才能繼續執行函數的效果。。

在開發過程當中，咱們須要根據不一樣的場景來決定咱們須要使用哪個版本的防抖函數，通常來說上述的防抖函數都能知足大部分的場景需求。但咱們也能夠將非當即執行版和當即執行版的防抖函數結合起來，實現最終的雙劍合璧版的防抖函數。