防抖（debounce）和節流（throttle）的學習總結

caspar 發布于2019-08-23 15:58 / 1075人閱讀

摘要：節流原理為事件觸發時調用的函數添加時間閾值，只有在超過時間閾值時觸發事件，回調函數才會被調用。

防抖（debounce）

用戶與網頁進行交互時，經常出現根據頁面的狀態、數據向服務器請求、發送數據的場景，比如：根據用戶的輸入數據進行實時校驗，下拉請求數據等等，如果用戶操作過于頻繁，頁面狀態、數據變化的太快太頻繁，會進行多次請求，這其中的很多請求都是沒有意義的，實時校驗，只需要校驗用戶最后的輸入，下拉請求只需要在用戶下拉的最后一次進行請求。這就需要防抖來實現了。
防抖的原理：為事件觸發時調用的函數添加延遲，如果在延遲內頻繁觸發，上一次的事件觸發會被取消，延遲將會重新計算，這樣一來用戶的最會一次觸發，函數才會真正被調用。

//fn為回調函數，delay是人為設置的延遲
function debounce(fn, delay){
    var timeout; //定時器編號
    return function(){
        //context是回調函數運行的環境， 
        //args是回調函數的參數，一般是addEventListener傳進來的event變量
        var context = this, args = arguments;
        clearTimeout(timeout);//當用戶頻繁觸發事件時，定時器被清除
        timeout = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}
//調用方式
var validate = debounce(function(){
    //do somthing
}, 200);
document.querySelector("input").addEventListener("input", validate);

節流（throttle）

節流，顧名思義就是把管道的閥門稍稍關緊一點，讓水流動的少一點。在javascript中，很多事件是連續觸發的，比如：resize，mousemove。我們不希望事件頻繁觸發，如果采用防抖方案，事件只在延遲時間內觸發最后一次，這顯然是不合理的，我們只需要讓其觸發的頻率低一些，這就需要節流來實現。
節流原理：為事件觸發時調用的函數添加時間閾值，只有在超過時間閾值時觸發事件，回調函數才會被調用。

//fn為回調函數，threshhold是時間閾值
function throttle(fn, threshhold){
    var start = new Date(), timeout;
    var threshhold = threshhold || 160;
    return function(){
        //context是回調函數運行的環境， 
        //args是回調函數的參數，一般是addEventListener傳進來的event變量
        var context = this, args = arguments, cur = new Date();
        clearTimeout(timeout);
        //通過連續兩次觸發的時間間隔，決定是否調用回調函數
        if(cur - start >= threshhold){
            fn.apply(context, args);
            start = cur;
        }else{
            //當連續觸發行為結束時，還要進行最后一次函數回調
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}
//調用函數
var mousemove = throttle(function(e) {
 //do somthing
});

// 綁定監聽
document.querySelector("#panel").addEventListener("mousemove", mousemove);

以下是html頁面

最后，大家可以通過這個動畫來理解，學習防抖和節流。

云服務器 GPU云服務器 VUE防抖與節流機器學習學習總結機器學習總結 javascript學習總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102600.html

debounce(防抖)和throttle(節流)

摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區別就在于持續觸發事件時，前者合并事件并在最后時間去觸發事件，而后者則是隔間時間觸發一次關鍵知識點定時器閉包資源在線測試源代碼防抖和節流窗口的resize、scroll，輸入框內容校驗等操作時，如果這些操作處理函數較為復雜或頁面頻繁重渲染等操作時，如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以采用debo...

2bdenny 2019-08-19 18:46 評論0 收藏0
debounce(防抖)和throttle(節流)

摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區別就在于持續觸發事件時，前者合并事件并在最后時間去觸發事件，而后者則是隔間時間觸發一次關鍵知識點定時器閉包資源在線測試源代碼防抖和節流窗口的resize、scroll，輸入框內容校驗等操作時，如果這些操作處理函數較為復雜或頁面頻繁重渲染等操作時，如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以采用debo...

ssshooter 2019-08-01 15:28 評論0 收藏0
防抖與節流（源碼學習）

摘要：防抖與節流源碼學習最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節流，在此記錄對源碼的學習過程源碼來源防抖函數防抖使用場景現在我們需要做一個搜索框，當用戶輸入文字，執行事件的時候，需要發出異步請求去進行結果查詢。防抖與節流（源碼學習）最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節流，在此記錄對源碼的學習過程源碼來源：unders...

instein 2019-08-22 17:12 評論0 收藏0
說說JavaScript中函數的防抖 (Debounce) 與節流 (Throttle)

摘要：基礎防抖我們現在寫一個最基礎的防抖處理標記事件也做如下改寫現在試一下，我們會發現只有我們停止滾動秒鐘的時候，控制臺才會打印出一行隨機數。為何要防抖和節流有時候會在項目開發中頻繁地觸發一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數無限制調用，會大大加重瀏覽器的工作量，有可能導致頁面卡頓影響體驗；后臺...

yanwei 2019-08-23 18:10 評論0 收藏0
探究防抖(debounce)和節流(throttle)

摘要：如果使用的是防抖，那么得等我們停止滾動之后一段時間才會加載新的內容，沒有那種無限滾動的流暢感。這時候，我們就可以使用節流，將事件有效觸發的頻率降低的同時給用戶流暢的瀏覽體驗。調用，瀏覽器會在下次刷新的時候執行指定回調函數。本文來自我的博客，歡迎大家去GitHub上star我的博客本文從防抖和節流出發，分析它們的特性，并拓展一種特殊的節流方式requestAnimationFrame...

keke 2019-08-23 15:19 評論0 收藏0