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

DevTTL 發布于2019-08-23 12:34 / 2179人閱讀

摘要：防抖動與節流點擊查看源碼防抖動默認不立即觸發保存作用域保存參數初始化清空所有定時器如果是立即觸發為空時觸發操作時間后置空時間后觸發操作防抖動立即觸發防抖動節流默認立即觸發保存作用域保存參數為空時立即觸發時間后觸發操作節流立即觸發節流總結

防抖動與節流

點擊查看源碼

防抖動

var debounce = function (fn, delay, isImmediate) {
    var timer = null;
    // 默認不立即觸發
    isImmediate = typeof isImmediate === "undefined" ? false : isImmediate;

    return function () {
        var ctx = this, // 保存作用域
            args = arguments; // 保存參數
        // 初始化清空所有定時器
        if (timer) {
            clearTimeout(timer);
        }
        // 如果是立即觸發
        if (isImmediate) {
            if (!timer) { // timer為空時觸發操作
                fn.apply(ctx, args);
            }
            // delay時間后置空timer
            timer = setTimeout(_ => {
                timer = null;
            }, delay);
        } else { // delay時間后觸發操作
            timer = setTimeout(_ => {
                fn.apply(ctx, args);
            }, delay);
        }
    };
};

防抖動立即觸發

防抖動

節流

var throttle = function (fn, delay, isImmediate) {
    var timer = null;
    // 默認立即觸發
    isImmediate = typeof isImmediate === "undefined" ? true : isImmediate;

    return function () {
        var ctx = this, // 保存作用域
            args = arguments; // 保存參數
        if (!timer) { // timer為空時
            if (isImmediate) fn.apply(ctx, args); // 立即觸發
            timer = setTimeout(function () {
                clearTimeout(timer);
                timer = null;
                if (!isImmediate) fn.apply(ctx, args); // delay時間后觸發操作
            }, delay);
        }
    };
};

節流立即觸發

節流

總結

防抖動：將多個操作合并為一個操作（例如，鍵盤輸入關鍵字搜索內容），在規定延時時間后觸發，如果在定時器時間范圍內觸發，則會清楚定時器，重新計時

節流：在給定的延時時間后觸發一次操作，在此時間范圍內的操作均不觸發（例如，圖片懶加載、向下無限滾動獲取新數據）

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

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

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

防抖動與節流

摘要：防抖動節流節流使得一定時間內只觸發一次函數。它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖動只是在最后一次事件后才觸發一次函數。防抖動與節流針對一些會頻繁觸發的事件如scroll、resize，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。所以我們對于這種事件我們要進行防抖動或...

Yangyang 2019-08-21 17:41 評論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