成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS中的函數(shù)去抖與節(jié)流

fuchenxuan / 2168人閱讀

摘要：上段代碼的一個(gè)問題是，事件會(huì)在定時(shí)器結(jié)束后被觸發(fā)，因此會(huì)出現(xiàn)一定的延遲，如果想讓事件被立即觸發(fā)，可以使用以下的去抖函數(shù)但是，對(duì)于去抖來說，在某些場(chǎng)景下是不合適的，因此我們可以使用節(jié)流。

參考文章
游戲星人眼中的節(jié)流與去抖（很生動(dòng)）

函數(shù)去抖與節(jié)流

Debounce：函數(shù)去抖就是對(duì)于一定時(shí)間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次
Throttle：函數(shù)節(jié)流就是讓連續(xù)執(zhí)行的函數(shù)，變成固定時(shí)間段間斷地執(zhí)行
區(qū)別：節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

debounce

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

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

因此，如果執(zhí)行一些復(fù)雜的運(yùn)算或者DOM操作，對(duì)于一些瀏覽器來說可能會(huì)出現(xiàn)崩潰的情況。

去抖debounce實(shí)現(xiàn)的效果是：以scroll舉例，當(dāng)scroll執(zhí)行一次后，會(huì)設(shè)置一個(gè)定時(shí)器來控制接下來的一段時(shí)間內(nèi)scroll不會(huì)被觸發(fā)，如果這段時(shí)間內(nèi)又觸發(fā)了scroll，會(huì)在當(dāng)前時(shí)間點(diǎn)重新設(shè)置定時(shí)器，知道定時(shí)器時(shí)間結(jié)束后才可以被繼續(xù)觸發(fā)。因此，debounce保證了一段時(shí)間內(nèi)的連續(xù)函數(shù)調(diào)用，會(huì)使其只執(zhí)行一次。

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);

上段代碼的一個(gè)問題是，事件會(huì)在定時(shí)器結(jié)束后被觸發(fā)，因此會(huì)出現(xiàn)一定的延遲，如果想讓事件被立即觸發(fā)，可以使用以下的去抖函數(shù)：

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);
        }
    }
}

但是，對(duì)于去抖來說，在某些場(chǎng)景下是不合適的，因此我們可以使用節(jié)流。

throttle

節(jié)流可以保證在一段時(shí)間內(nèi)函數(shù)必定會(huì)觸發(fā)一次。

節(jié)流主要有兩種實(shí)現(xiàn)：
1.時(shí)間戳
2.定時(shí)器

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

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

防止一個(gè)事件頻繁出發(fā)回調(diào)函數(shù)的方式：
去抖debounce： 一段時(shí)間內(nèi)連續(xù)的函數(shù)調(diào)用，只允許其執(zhí)行一次。原理是，維護(hù)一個(gè)定時(shí)器，只有定時(shí)器結(jié)束才可以繼續(xù)觸發(fā)事件。
節(jié)流throttle： 一段時(shí)間內(nèi)的函數(shù)調(diào)用，保證事件一定會(huì)被執(zhí)行一次。原理是判斷兩次執(zhí)行函數(shù)的時(shí)間間隔是否大于延遲的時(shí)間。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96718.html

相關(guān)文章

  • JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

    摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔...

    chadLi 評(píng)論0 收藏0

  • JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

    摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔...

    EscapedDog 評(píng)論0 收藏0

  • JS專題之節(jié)流函數(shù)

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

    huaixiaoz 評(píng)論0 收藏0

  • 小菊花課堂之JS的防抖與節(jié)流

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

    leoperfect 評(píng)論0 收藏0

  • 小菊花課堂之JS的防抖與節(jié)流

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

    Yangder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<