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

資訊專欄INFORMATION COLUMN

JavaScript之節(jié)流與防抖

wayneli / 586人閱讀

摘要：個人博客原文地址背景我們在開發(fā)的過程中會經(jīng)常使用如等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。

個人博客原文地址

背景

我們在開發(fā)的過程中會經(jīng)常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。
因此針對這類事件要進(jìn)行節(jié)流或者防抖處理

節(jié)流

節(jié)流的意思是，在規(guī)定的時間內(nèi)只會觸發(fā)一次函數(shù)，如我們設(shè)置函數(shù)500ms觸發(fā)一次，之后你無論你觸發(fā)了多少次函數(shù)，在這個時間內(nèi)也只會有一次執(zhí)行效果

先來看一個例子

https://codepen.io/wclimb/pen...

我們看到使用了節(jié)流的在1000ms內(nèi)只觸發(fā)了一次，而沒有使用節(jié)流的則頻繁觸發(fā)了調(diào)用的函數(shù)

接下來看看代碼實現(xiàn)
v1 第一次不觸發(fā)，不傳參實現(xiàn)

function throttle(fn,interval){
    var timer;
    return function(){
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn()
        }, interval || 1000);
    }   
}

效果是實現(xiàn)了，但是我在嘗試在執(zhí)行函數(shù)里console.log(this)，結(jié)果發(fā)現(xiàn)this指向的是window，而且還發(fā)現(xiàn)我們不能傳遞參數(shù)，下面就來改進(jìn)一下

v2 第一次觸發(fā)函數(shù)，接收參數(shù)

function throttle(fn,interval){
    var timer,
        isFirst = true;
    return function(){
        var args = arguments,
            that = this;
        if(isFirst){
            fn.apply(that,args)
            return isFirst = false
        }
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn.apply(that,args)
        }, interval || 1000);
    }   
}
防抖

防抖的意思是無論你觸發(fā)多少次函數(shù)，只會觸發(fā)最后一次函數(shù)。最常用的就是在表單提交的時候，用戶可能會一段時間內(nèi)點擊很多次，這個時候可以增加防抖處理，我們只需要最后一次觸發(fā)的事件

先來看一個例子

https://codepen.io/wclimb/pen...

我們看到使用了防抖的方框，無論你在里面觸發(fā)了多少次函數(shù)，都只會觸發(fā)最后的那一次函數(shù)，而沒有使用防抖的則頻繁觸發(fā)了調(diào)用的函數(shù)

v1 第一次不觸發(fā)函數(shù)

function debounce(fn,interval){
    var timer;
    return function(){
        var args = arguments,
            that = this;
        if(timer){
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(() => {
            fn.apply(null,args)
        }, interval || 1000);
    }
}

上面這段代碼仍然可以正常執(zhí)行，但是我們并沒有指定他的this

v2 第一次就觸發(fā)函數(shù)

function debounce(fn,interval){
    var timer,
        isFirst  = true,
            can = false;
    return function(){
        var args = arguments,
            that = this;
        if(timer){
            clearTimeout(timer)
            timer = null
        }
        if(isFirst){
            fn.apply(that,args)
            isFirst = false
            setTimeout(() => {
                can = true
            }, interval || 1000);
        }else if(can){
            timer = setTimeout(() => {
                fn.apply(null,args)
            }, interval || 1000);
        }
    }
}

如有雷同，純屬抄我（開玩笑）

如有錯誤，還望指正，僅供參考

GitHub：wclimb

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

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

相關(guān)文章

  • 理解節(jié)流與防抖

    摘要：節(jié)流節(jié)流限制了一個函數(shù)可以在短時間內(nèi)被調(diào)用的次數(shù)。更新防抖防抖確保了一個函數(shù)只有在一個固定時間段內(nèi)沒有被調(diào)用過后，才會再次被調(diào)用。再換句話說防抖會等待事件不再高頻發(fā)生，再觸發(fā)。這個網(wǎng)站很好的可視化了節(jié)流與防抖。 節(jié)流 Throttling 節(jié)流限制了一個函數(shù)可以在短時間內(nèi)被調(diào)用的次數(shù)?？梢赃@樣形容：在一毫秒內(nèi)最多執(zhí)行此函數(shù) 1 次。 Throttling enforces a maxi...

    glumes 評論0 收藏0

  • The debounce & throttle in Javascript（防抖與節(jié)流）

    摘要：您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。一些文章中的與上面所談到的設(shè)置類似。防抖防抖技術(shù)允許我們捆綁多個連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個簡單的舉個 歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。 節(jié)流[throttle]與防抖[debounce]在前...

    XboxYan 評論0 收藏0

  • 淺談節(jié)流與防抖

    摘要：節(jié)流和防抖在開發(fā)項目過程中很常見，例如輸入實時搜索滾動更新了，等等，大量的場景需要我們對其進(jìn)行處理。防抖多次觸發(fā)，只在最后一次觸發(fā)時，執(zhí)行目標(biāo)函數(shù)。節(jié)流限制目標(biāo)函數(shù)調(diào)用的頻率，比如內(nèi)不能調(diào)用次。 節(jié)流和防抖在開發(fā)項目過程中很常見，例如 input 輸入實時搜索、scrollview 滾動更新了，等等，大量的場景需要我們對其進(jìn)行處理。我們由 Lodash 來介紹，直接進(jìn)入主題吧。 Lod...

    thursday 評論0 收藏0

  • 從lodash源碼學(xué)習(xí)節(jié)流與防抖

    摘要：首先重置防抖函數(shù)最后調(diào)用時間，然后去觸發(fā)一個定時器，保證后接下來的執(zhí)行。這就避免了手動管理定時器。 ??之前遇到過一個場景，頁面上有幾個d3.js繪制的圖形。如果調(diào)整瀏覽器可視區(qū)大小，會引發(fā)圖形重繪。當(dāng)圖中的節(jié)點比較多的時候，頁面會顯得異?？D。為了限制類似于這種短時間內(nèi)高頻率觸發(fā)的情況，我們可以使用防抖函數(shù)。 ??實際開發(fā)過程中，這樣的情況其實很多，比如： 頁面的scroll事件 ...

    CloudDeveloper 評論0 收藏0

  • 節(jié)流 - 理解，實踐與實現(xiàn)

    摘要：節(jié)流分流，與防抖去抖實現(xiàn)原理相似。本文主要討論節(jié)流，鏡像文章防抖理解，實踐與實現(xiàn)。分開討論防抖和節(jié)流，主要是為了讓一些還不太了解節(jié)流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節(jié)流模式，每一次觸發(fā)都會繪制一個圓點。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節(jié)流(分流)，與防抖（去抖）實現(xiàn)原理相似。本文主...

    layman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<