JS中的函數去抖與節流

fuchenxuan 發布于2019-08-23 10:49 / 2165人閱讀

摘要：上段代碼的一個問題是，事件會在定時器結束后被觸發，因此會出現一定的延遲，如果想讓事件被立即觸發，可以使用以下的去抖函數但是，對于去抖來說，在某些場景下是不合適的，因此我們可以使用節流。

參考文章
游戲星人眼中的節流與去抖（很生動）

函數去抖與節流

Debounce：函數去抖就是對于一定時間段的連續的函數調用，只讓其執行一次
Throttle：函數節流就是讓連續執行的函數，變成固定時間段間斷地執行
區別：節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。

debounce

瀏覽器的一些原生事件，在執行時并不是只執行一次，可能會執行很多次，因此需要我們對其加以控制。以scroll舉例：

window.onscroll = function() {
    console.log("hello world!");
}

因此，如果執行一些復雜的運算或者DOM操作，對于一些瀏覽器來說可能會出現崩潰的情況。

去抖debounce實現的效果是：以scroll舉例，當scroll執行一次后，會設置一個定時器來控制接下來的一段時間內scroll不會被觸發，如果這段時間內又觸發了scroll，會在當前時間點重新設置定時器，知道定時器時間結束后才可以被繼續觸發。因此，debounce保證了一段時間內的連續函數調用，會使其只執行一次。

function debounce(delay, fn) {
    var timer;
    return function() {
        var context = this;
        var args = arguments;
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(context, args);
        }, delay)
    }
}

function print() {
    console.log("hello world!");
}

window.onscroll = debounce(2000, print);

上段代碼的一個問題是，事件會在定時器結束后被觸發，因此會出現一定的延遲，如果想讓事件被立即觸發，可以使用以下的去抖函數：

function debounce(delay, fn) {
    var timer;
    return function() {
        var context = this;
        var args = arguments;
        if(timer) {
            clearTimeout(timer);
        }
        var doNow = !timer;
        timer = setTimeout(() => {
            timer = null;
        }, delay);
        if(doNow) {
            fn.apply(context, args);
        }
    }
}

但是，對于去抖來說，在某些場景下是不合適的，因此我們可以使用節流。

throttle

節流可以保證在一段時間內函數必定會觸發一次。

節流主要有兩種實現：
1.時間戳
2.定時器

// 時間戳實現
function throttle(delay, fn) {
    var prev = Date.now();
    return function() {
        var curr = Date.now();
        if(curr - prev > delay) {
            fn.apply(this, arguments);
            last = curr;
        }
    }
}

// 定時器實現
function throttle(delay, fn) {
    var timer;
    return function() {
        var context = this; // 函數執行上下文
        var args = arguments;
        console.log("1", new Date());
        if(timer) {
            return;
        }
        timer = setTimeout(() => {
            fn.apply(context, args);
            clearTimeout(timer);
            // setTimeout返回一個整數，clearTimeout后也還是整數，因此需要置空，setInterval也是如此
            timer = null;
        }, delay);
    }
}

總結

防止一個事件頻繁出發回調函數的方式：
去抖debounce：一段時間內連續的函數調用，只允許其執行一次。原理是，維護一個定時器，只有定時器結束才可以繼續觸發事件。
節流throttle：一段時間內的函數調用，保證事件一定會被執行一次。原理是判斷兩次執行函數的時間間隔是否大于延遲的時間。

GPU云服務器云服務器 VUE防抖與節流 js函數節流函數節流 javascript中的函數

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

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

JavaScript 五十問——認真聊一聊去抖與節流

摘要：前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔...

chadLi 2019-08-02 14:05 評論0 收藏0
JavaScript 五十問——認真聊一聊去抖與節流

摘要：前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔...

EscapedDog 2019-08-23 14:38 評論0 收藏0
JS專題之節流函數

摘要：一什么是節流節流函數就是讓事件處理函數在大于等于執行周期時才能執行，周期之內不執行，即事件一直被觸發，那么事件將會按每小段固定時間一次的頻率執行。我們通過一個簡單的示意來理解節流函數可以用時間戳和定時器兩種方式進行處理。本文共 2000 字，讀完只需 8 分鐘上一篇文章講了去抖函數，然后這一篇講同樣為了優化性能，降低事件處理頻率的節流函數。一、什么是節流？節流函數（thrott...

huaixiaoz 2019-08-23 14:01 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0