js 函數(shù)防抖和節(jié)流

Amio 發(fā)布于2019-08-23 15:39 / 855人閱讀

摘要：函數(shù)節(jié)流函數(shù)防抖總結(jié)其實(shí)函數(shù)節(jié)流和防抖都是閉包的運(yùn)用，保存外部函數(shù)中的變量值，只不過(guò)節(jié)流是在多次操作中取第一次，而防抖是取多次操作中的最后一次，具體原因是因?yàn)槭侵械暮耆蝿?wù)，在主線程代碼執(zhí)行完畢之后才會(huì)執(zhí)行其中的回調(diào)方法。

函數(shù)節(jié)流

    function throttle(fn, delay = 2000) {
        let Timer = null

        return function () {

            let Now = +new Date()

            if ( Now - Timer >= delay || !Timer) {
                fn.call(this, ...arguments)
                Timer = Now
            }
        }
    }

函數(shù)防抖

    function debounce(fn, delay = 300) {
        let Timer

        return function() {
            let _arg = arguments
            let _this = this

            if (Timer) {
                clearTimeout(Timer)
            }

            Timer = setTimeout(() => {
                fn.apply(this, _arg)
            }, delay);
        }
    }

總結(jié):

其實(shí)函數(shù)節(jié)流和防抖都是閉包的運(yùn)用，保存外部函數(shù)中的變量值，只不過(guò)節(jié)流是在多次操作中取第一次，而防抖是取多次操作中的最后一次，具體原因是因?yàn)閟etTimeout是eventloop中的宏任務(wù)，在主線程代碼執(zhí)行完畢之后才會(huì)執(zhí)行其中的回調(diào)方法。

GPU云服務(wù)器云服務(wù)器 VUE防抖與節(jié)流 js函數(shù)節(jié)流函數(shù)節(jié)流防抖

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

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

相關(guān)文章

詳談js防抖和節(jié)流

摘要：本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場(chǎng)景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問(wèn)題，比如觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。本文由小芭樂(lè)發(fā)表 0. 引入首先舉一個(gè)例子：模擬在輸入框輸入后做ajax查詢請(qǐng)求，沒(méi)有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：沒(méi)有防抖 ...

shevy 2019-08-23 13:54 評(píng)論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評(píng)論0 收藏0
函數(shù)防抖和節(jié)流

摘要：應(yīng)用場(chǎng)景給按鈕加函數(shù)防抖防止表單多次提交。對(duì)于輸入框連續(xù)輸入進(jìn)行驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。參考十分鐘學(xué)會(huì)防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流防抖對(duì)于觸發(fā)非常頻繁又沒(méi)有必要每次都執(zhí)行的事件，希望合并到一次去執(zhí)行；實(shí)現(xiàn)思路：事件觸發(fā)后，在規(guī)定的時(shí)間范圍內(nèi)如果事件重復(fù)觸發(fā)，那么忽略之前觸發(fā)的事件，并且重新開始計(jì)時(shí)，直到某一次事件觸發(fā)后大于規(guī)定時(shí)間，我們才執(zhí)...

daydream 2019-08-23 16:50 評(píng)論0 收藏0
JavaScript防抖和節(jié)流

摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)一定時(shí)間內(nèi)方法只跑一次。概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流：指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任...

DevWiki 2019-08-23 17:09 評(píng)論0 收藏0
JS簡(jiǎn)單實(shí)現(xiàn)防抖和節(jié)流

摘要：定時(shí)器實(shí)現(xiàn)當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行直到秒后，定時(shí)器執(zhí)行執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。當(dāng)最后一次停止觸發(fā)后，由于定時(shí)器的延遲，可能還會(huì)執(zhí)行一次函數(shù)。一、什么是防抖和節(jié)流 Ps: 比如搜索框，用戶在輸入的時(shí)候使用change事件去調(diào)用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務(wù)器資源，即使你的服務(wù)器資源...

MRZYD 2019-08-23 10:37 評(píng)論0 收藏0
淺談js防抖和節(jié)流

摘要：防抖和節(jié)流嚴(yán)格算起來(lái)應(yīng)該屬于性能優(yōu)化的知識(shí)，但實(shí)際上遇到的頻率相當(dāng)高，處理不當(dāng)或者放任不管就容易引起瀏覽器卡死。防抖和節(jié)流嚴(yán)格算起來(lái)應(yīng)該屬于性能優(yōu)化的知識(shí)，但實(shí)際上遇到的頻率相當(dāng)高，處理不當(dāng)或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點(diǎn)掌握的。（信我，你看完肯定就懂了）從滾動(dòng)條監(jiān)聽的例子說(shuō)起先說(shuō)一個(gè)常見的功能，很多網(wǎng)站會(huì)提供這么一個(gè)按鈕：用于返回頂部。showImg(ht...

opengps 2019-08-26 13:32 評(píng)論0 收藏0