国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

throttle 和 debounce 簡單實現(xiàn)

Taste / 2425人閱讀

摘要：但是，我在測試中，智能手機中的慢速滾動可能會觸發(fā)每秒多達個事件。把電梯完成一次運送，類比為一次函數(shù)的執(zhí)行和響應(yīng)。假設(shè)電梯有兩種運行策略和，超時設(shè)定為秒，不考慮容量限制。保證如果電梯第一個人進來后，秒后準(zhǔn)時運送一次，不等待。

使用場景

某些場景下，一些計算量比較大的函數(shù)，操作 DOM 函數(shù)等函數(shù)會被頻繁調(diào)用執(zhí)行，而且由于人的反應(yīng)有限實際不需要那么多計算，就會造成極大的性能浪費。
舉個例子
當(dāng)使用鼠標(biāo)滾輪時可以輕松觸發(fā)每秒30個事件。但是，我在測試中，智能手機中的慢速滾動可能會觸發(fā)每秒多達100個事件。你的滾動處理程序是否真的需要這個執(zhí)行速度？
下面我列舉一些場景

window對象的resize、scroll事件，如處理圖片懶加載

拖拽時的mousemove事件

鍵盤 keyup 事件

...

原理

那么throttle 和 debounce 函數(shù)是怎樣做的呢？
這里引用經(jīng)典的舉例

想象每天上班大廈底下的電梯。把電梯完成一次運送，類比為一次函數(shù)的執(zhí)行和響應(yīng)。假設(shè)電梯有兩種運行策略 throttle 和 debounce ，超時設(shè)定為15秒，不考慮容量限制。
1.throttle 策略的電梯。保證如果電梯第一個人進來后，15秒后準(zhǔn)時運送一次，不等待。如果沒有人，則待機。
2.debounce 策略的電梯。如果電梯里有人進來，等待15秒。如果又人進來，15秒等待重新計時，直到15秒超時，開始運送。

用我的一句話說是，throttle 在一段時間內(nèi)最多執(zhí)行一次，而 debounce 是在接下來一段時間內(nèi)沒有再次調(diào)用，則執(zhí)行。

實現(xiàn)

由于說了是簡單實現(xiàn)，那么就把最核心的部分拿出來

debounce 
function debounce (cb, delay) {
    var timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(cb, delay);
    }
}
throttle 
function throttle (cb, delay) {
    var lastTime = Date.now();
    return function () {
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            cb();
            lastTime = nowTime;
        }
    }
}

可以看下效果
查看鏈接

知道原理之后，想要使用，現(xiàn)在很多庫都有這個功能

jquery 插件 jQuery throttle / debounce

Underscore 庫 _.throttle 和 _.debounce

lodash 庫 _.debounce 和 _.throttle

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95700.html

相關(guān)文章

  • 淺談throttle以及debounce的原理和實現(xiàn)

    摘要：淺談以及的原理和實現(xiàn)背景日常開發(fā)中我們經(jīng)常會遇到一些需要節(jié)流調(diào)用或者壓縮調(diào)用次數(shù)的情況例如之前我在完成一個需求的時候就遇到了因為后端并發(fā)問題導(dǎo)致收到多條信息從而導(dǎo)致函數(shù)被重復(fù)調(diào)用的情況當(dāng)時的做法是通過對函數(shù)的調(diào)用進行注冊遇到多次調(diào)用的時候清 淺談throttle以及debounce的原理和實現(xiàn) 背景 日常開發(fā)中,我們經(jīng)常會遇到一些需要節(jié)流調(diào)用,或者壓縮調(diào)用次數(shù)的情況,例如之前我在完成...

    jsbintask 評論0 收藏0

  • 【譯】通過例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件?？偨Y(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術(shù)，都可以控制一個函數(shù)在一段時間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們在操作 DOM 事件的時候，為函數(shù)添加 debounce 或者 th...

    LeoHsiun 評論0 收藏0

  • Debounce vs Throttle

    摘要：那么還有最后一個問題，那我之前設(shè)置的定時器怎么辦呢定時器執(zhí)行的是這個函數(shù)，而這個函數(shù)又會通過進行一次判斷。 我們在處理事件的時候，有些事件由于觸發(fā)太頻繁，而每次事件都處理的話，會消耗太多資源，導(dǎo)致瀏覽器崩潰。最常見的是我們在移動端實現(xiàn)無限加載的時候，移動端本來滾動就不是很靈敏，如果每次滾動都處理的話，界面就直接卡死了。 因此，我們通常會選擇，不立即處理事件，而是在觸發(fā)一定次數(shù)或一定時間...

    xcold 評論0 收藏0

  • throttle函數(shù)與debounce函數(shù)

    摘要：當(dāng)函數(shù)被再次觸發(fā)時，清除已設(shè)置的定時器，重新設(shè)置定時器。函數(shù)設(shè)置定時器，并根據(jù)傳參配置決定是否在等待開始時執(zhí)行函數(shù)。函數(shù)取消定時器，并重置內(nèi)部參數(shù)。 throttle函數(shù)與debounce函數(shù) 有時候，我們會對一些觸發(fā)頻率較高的事件進行監(jiān)聽，如果在回調(diào)里執(zhí)行高性能消耗的操作，反復(fù)觸發(fā)時會使得性能消耗提高，瀏覽器卡頓，用戶使用體驗差。或者我們需要對觸發(fā)的事件延遲執(zhí)行回調(diào)，此時可以借助th...

    Prasanta 評論0 收藏0

  • throttle與debounce的區(qū)別

    摘要：自己嘗試一下年在的文章中第一次看到的實現(xiàn)方法。這三種實現(xiàn)方法內(nèi)部不同，但是接口幾乎一致。如你所見，我們使用了參數(shù)，因為我們只對用戶停止改變?yōu)g覽器大小時最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對學(xué)術(shù)界拿來主義的思考》具體文章詳見，微信公眾號：showImg(https://segmentfault.com/img/b...

    Pluser 評論0 收藏0

發(fā)表評論

0條評論

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