防抖動與節流

Yangyang 發布于2019-08-21 17:41 / 456人閱讀

摘要：防抖動節流節流使得一定時間內只觸發一次函數。它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖動只是在最后一次事件后才觸發一次函數。

防抖動與節流

針對一些會頻繁觸發的事件如scroll、resize，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。所以我們對于這種事件我們要進行防抖動或者節流的處理來優化性能。

防抖動

防抖動：將幾次操作合并為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。

節流

節流：使得一定時間內只觸發一次函數。
它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖動只是在最后一次事件后才觸發一次函數。
原理是通過判斷是否到達一定時間來觸發函數，若沒到規定時間則使用計時器延后，而下一次事件則會重新設定計時器。

時間戳實現：

當高頻事件觸發時，第一次應該會立即執行（給事件綁定函數與真正觸發事件的間隔如果大于delay的話），而后再怎么頻繁觸發事件，也都是會每delay秒才執行一次。而當最后一次事件觸發完畢后，事件也不會再被執行了。

var throttle = function(func,delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}

定時器實現：

當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒后，定時器執行執行函數，清空定時器，這樣就可以設置下個定時器。

var throttle = fucntion(func,delay){
    var timer = null;

    return funtion(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context,args);
                timer = null;
            },delay);
        }
    }
}

云服務器 GPU云服務器防抖動 VUE防抖與節流 webrtc防抖動 webrtc防抖動策略

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

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

小白圖解防抖動與節流-Javascript篇

摘要：防抖動與節流點擊查看源碼防抖動默認不立即觸發保存作用域保存參數初始化清空所有定時器如果是立即觸發為空時觸發操作時間后置空時間后觸發操作防抖動立即觸發防抖動節流默認立即觸發保存作用域保存參數為空時立即觸發時間后觸發操作節流立即觸發節流總結防抖動與節流點擊查看源碼防抖動 var debounce = function (fn, delay, isImmediate) { v...

DevTTL 2019-08-23 12:34 評論0 收藏0
節流和防抖動

摘要：起因面試被問到了節流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學起首先先看字面意思節流的意思就是水龍頭關小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發生形變的那一刻舉個例子節流在改變窗口大小起因面試被問到了節流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼從語文和英語學起首先, 先看字面意思:節流(throttl...

hellowoody 2019-08-22 15:41 評論0 收藏0
防抖動與節流

摘要：它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。防抖動其核心內涵在于延遲處理，也就是將一系列的事件處理程序全部延遲，保障推送進來的第一次事件處理 var debounce　 = function(fn,delay,mustRunDelay){ var timer = null; var t_start; ...

alexnevsky 2019-08-21 17:42 評論0 收藏0
防抖動處理和節流小技巧

摘要：簡單的防抖動處理，一秒內點擊一次向服務器請求數據點擊按鈕向后臺請求數據優化點另外一些防抖動的小技巧，請參考封裝好的簡單防抖動函數防抖動函數要執行的函數，間隔毫秒數調用現成的工具庫防抖動節流 1. 簡單的防抖動處理，一秒內點擊一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...

lscho 2019-08-22 18:02 評論0 收藏0