函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）

bergwhite 發(fā)布于2019-08-23 15:40 / 2080人閱讀

摘要：去抖主要針對的是頻繁觸發(fā)某個事件后，然后進行后續(xù)處理的場景。常見的就是頻繁輸入停止假設后進行查詢等操作。函數(shù)接口定義實際需要調(diào)用的函數(shù)空閑時間返回調(diào)用函數(shù)函數(shù)接口定義延遲時間需要調(diào)用的函數(shù)返回函數(shù)

前言

做過前端的童鞋應該都知道lodash這個強大的使用工具庫。為什么要寫這篇文章呢，主要今天遇到一個問題，socket推送消息太頻繁，導致saga頻繁更新，頁面有所卡頓，需要通過函數(shù)節(jié)流控制，發(fā)現(xiàn)自己突然不會寫這樣的代碼，而且模糊了節(jié)流和抖動的區(qū)別。簡單實現(xiàn)一下，源碼其實復雜的多。

區(qū)別

節(jié)流：一些場景頻繁觸發(fā)，導致頁面崩潰，資源加載重復等行為，需要控制執(zhí)行頻率，這個時候就叫做節(jié)流。
去抖：主要針對的是頻繁觸發(fā)某個事件后，然后進行后續(xù)處理的場景。常見的就是頻繁輸入停止3s(假設)后進行查詢等操作。

_.debounce

函數(shù)接口定義：

@param fn實際需要調(diào)用的函數(shù)
@param second 空閑時間
@return callback 返回調(diào)用函數(shù)

const debounce = (fn, second) => {
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(() =>{
            fn()
        }, second)
    }
}

_.throttle

函數(shù)接口定義：

@param delay延遲時間
@param fn需要調(diào)用的函數(shù)
@return cb返回函數(shù)

const throttle = (fn, delay) => {
    let last = 0
    return () => {
        let current = new Date()
        if(current-last > delay) {
           fn()
           last = current
        }
    }
}

GPU云服務器云服務器函數(shù)節(jié)流 js函數(shù)節(jié)流 php函數(shù)與函數(shù)調(diào)用最新函數(shù)與算法

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

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

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

摘要：上段代碼的一個問題是，事件會在定時器結(jié)束后被觸發(fā)，因此會出現(xiàn)一定的延遲，如果想讓事件被立即觸發(fā)，可以使用以下的去抖函數(shù)但是，對于去抖來說，在某些場景下是不合適的，因此我們可以使用節(jié)流。參考文章游戲星人眼中的節(jié)流與去抖（很生動）函數(shù)去抖與節(jié)流 Debounce：函數(shù)去抖就是對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次Throttle：函數(shù)節(jié)流就是讓連續(xù)執(zhí)行的函數(shù)，變成固定時間段間斷...

fuchenxuan 2019-08-23 10:49 評論0 收藏0
JS throttle與debounce的區(qū)別

摘要：可以看下面的栗子這個圖中圖中每個小格大約，右邊有原生事件與節(jié)流去抖插件的與事件。即如果有連續(xù)不斷的觸發(fā)，每執(zhí)行一次，用在每隔一定間隔執(zhí)行回調(diào)的場景。執(zhí)行啦打印執(zhí)行啦打印執(zhí)行啦節(jié)流按照上面的說明，節(jié)流就是連續(xù)多次內(nèi)的操作按照指定的間隔來執(zhí)行。一般在項目中我們會對input、scroll、resize等事件進行節(jié)流控制，防止事件過多觸發(fā)，減少資源消耗；在vue的官網(wǎng)的例子中就有關于lod...

wawor4827 2019-08-22 16:11 評論0 收藏0
JS - debounce(去抖) 和 throttle(節(jié)流)

摘要：多次連續(xù)事件觸發(fā)動作最后一次觸發(fā)之后的指定時間間隔執(zhí)行回調(diào)函數(shù)預先設定一個執(zhí)行周期，當調(diào)用動作的時刻大于等于執(zhí)行周期則執(zhí)行該動作，然后進入下一個新的時間周期。定義為了避免某個事件在較短的時間段內(nèi)（稱為 T）內(nèi)連續(xù)觸發(fā)從而引起的其對應的事件處理函數(shù)不必要的連續(xù)執(zhí)行的一種事件處理機制（高頻觸發(fā)事件解決方案）debounce：當調(diào)用動作觸發(fā)一段時間后，才會執(zhí)行該動作，若在這段時間間隔內(nèi)又...

Mike617 2019-08-23 18:36 評論0 收藏0
JavaScript 函數(shù)節(jié)流和函數(shù)去抖應用場景辨析

摘要：函數(shù)節(jié)流和去抖的出現(xiàn)場景，一般都伴隨著客戶端的事件監(jiān)聽。函數(shù)節(jié)流的核心是，讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流。概述也是好久沒更新源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎）言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會涉及具體的代碼實現(xiàn)（關于代碼實現(xiàn)請期...

ZHAO_ 2019-08-21 14:35 評論0 收藏0
前端常用代碼片段(三)

摘要：可以是數(shù)字或者是字符串如果是數(shù)字則表示屬性名前加上空格符號的數(shù)量，如果是字符串，則直接在屬性名前加上該字符串。最后更新于2019年1月13日前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.打亂數(shù)組中元素順序（類似音樂隨機播放） function...

U2FsdGVkX1x 2019-08-21 16:25 評論0 收藏0