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

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

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

前言

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

區(qū)別

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

_.debounce

函數(shù)接口定義：

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

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

_.throttle

函數(shù)接口定義：

@param delay延遲時(shí)間
@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
        }
    }
}

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

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

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

相關(guān)文章

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

摘要：上段代碼的一個(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í)間段間斷...

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

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

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

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

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

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

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

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

U2FsdGVkX1x 2019-08-21 16:25 評(píng)論0 收藏0