函數防抖Debounce和函數節流Throttle

NicolasHe 發布于2019-08-22 15:23 / 3493人閱讀

摘要：函數節流函數防抖函數節流和函數防抖函數節流和函數防抖二者很容易被混淆起來。函數防抖函數在特定的時間內不被再調用后執行。一句話概括函數節流是從用戶開始輸入就開始計時，而函數節流是從用戶停止輸入開始計時。

函數節流 & 函數防抖

函數節流和函數防抖

函數節流和函數防抖二者很容易被混淆起來。下面貼英文原文，建議認真閱讀：
Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called".
Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds".

函數節流：確保函數特定的時間內至多執行一次。
函數防抖：函數在特定的時間內不被再調用后執行。

上面的概念可能還是不夠清晰，下面均以“輸入框輸入文字觸發ajax獲取數據”為例，分別以防抖和節流的思想來優化，二者的區別：

輸入框輸入文字如下：1111111111111111111111（停頓3s繼續輸入）11111111111111111
函數防抖：當用戶持續輸入1的過程中，并不會發送ajax，當用戶停止輸入2s后，發送ajax請求，之后到第3s后，用戶繼續輸入1的過程中，依舊不會發送ajax，當用戶停止輸入2s后，又觸發ajax請求。
函數節流：當用戶持續輸入1的過程中（假設輸入1的過程超過2s了），從你開始輸入1開始計時，到第2s，發送ajax請求。函數節流與你是否停止輸入無關，是一種周期性執行的策略。
一句話概括：函數節流是從用戶開始輸入就開始計時，而函數節流是從用戶停止輸入開始計時。

場景分析

函數節流（throttle）

頻繁的mousemove/keydown，比如高頻的鼠標移動，游戲射擊類的

搜索聯想（keyup）

進度條（我們可能不需要高頻的更新進度）

拖拽的dragover等

高頻的點擊，抽獎等

無限滾動（用戶向下滾動無限滾動頁面，要檢查滾動位置距底部多遠。如果離底部進了，發ajax請求獲取更多數據插入頁中）

函數防抖（debounce）

scroll/resize事件，瀏覽器改變大小，有人說是throttle

文本連續輸入，ajax驗證/關鍵字搜索

注：throttle和debounce均是通過減少實際邏輯處理過程的執行來提高事件處理函數運行性能的手段，并沒有實質上減少事件的觸發次數。

使用函數節流是進行前端性能優化的方法之一，例如，懶加載的實現。

實現函數防抖和函數節流

函數防抖

function debounce(func,wait){
    var timeout;
    return function(){
        var context=this;//用來保存this的正確指向
        var args=arguments;//用來保存觸發的事件類型，例如keyboard event
        clearTimeout(timeout);//每次都重新開始計時
        timeout=setTimeout(function(){
            func.apply(context,args);
        },wait);
    }
}
a.onkeyup=debounce(getValue,3000);
function getValue(){
    console.log(this.value);//使用debounce調用它時，this就變為window
}

函數節流

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;
 
    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次觸發 func 剩余的時間
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果沒有剩余的時間了或者你改了系統時間
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

GPU云服務器云服務器函數節流 js函數節流 VUE防抖與節流存儲過程和函數的區別

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

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

說說JavaScript中函數的防抖 (Debounce) 與節流 (Throttle)

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

yanwei 2019-08-23 18:10 評論0 收藏0
徹底弄懂函數防抖和函數節流

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
js 防抖節流 JavaScript

摘要：此時需要采用防抖和節流的方式來減少調用頻率，同時不影響原來效果。函數防抖當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。 js 防抖節流 JavaScript 實際工作中，通過監聽某些事件，如scroll事件檢測滾動位置，根據滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應頁面調整DOM的渲染；如ke...

int64 2019-08-23 14:48 評論0 收藏0
防抖（debounce）和節流（throttle）的學習總結

摘要：節流原理為事件觸發時調用的函數添加時間閾值，只有在超過時間閾值時觸發事件，回調函數才會被調用。防抖（debounce）用戶與網頁進行交互時，經常出現根據頁面的狀態、數據向服務器請求、發送數據的場景，比如：根據用戶的輸入數據進行實時校驗，下拉請求數據等等，如果用戶操作過于頻繁，頁面狀態、數據變化的太快太頻繁，會進行多次請求，這其中的很多請求都是沒有意義的，實時校驗，只需要校驗用戶最后...

caspar 2019-08-23 15:58 評論0 收藏0
防抖（debounce）和節流（throttle）---解決事件頻繁觸發造成頁面卡死

摘要：防抖和節流連續觸發觸發頻率很高的時間，不進行優化，會出現頁面卡頓現象。節流防抖是多次觸發事件，目標函數只執行一次，不管觸發這些事件用了多少時間。防抖（debounce）和節流（throttle）連續觸發（觸發頻率很高）的時間，不進行優化，會出現頁面卡頓現象。常見的需要優化的事件：鼠標事件: mousemove（拖拽） mouseover(劃過) mouseWheel(滾屏)...

IamDLY 2019-08-02 15:21 評論0 收藏0