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

資訊專欄INFORMATION COLUMN

理解節(jié)流和防抖

zebrayoung / 2948人閱讀

摘要：所以針對(duì)此類事件則需要進(jìn)行節(jié)流，或者防抖動(dòng)處理。節(jié)流判斷是否已空閑，如果在執(zhí)行中，則直接函數(shù)節(jié)流二防抖對(duì)于一定時(shí)間段內(nèi)的連續(xù)的函數(shù)調(diào)用，只執(zhí)行一次原理其實(shí)就是一個(gè)定時(shí)器，當(dāng)我們觸發(fā)一個(gè)事件時(shí)，讓這個(gè)事件延遲一會(huì)在執(zhí)行。

在瀏覽器dom事件里面，一些事件會(huì)隨著用戶的操作不間斷的觸發(fā)，比如：為一個(gè)元素綁定拖拽事件，為頁(yè)面綁定resize事件（重新調(diào)整瀏覽器窗口大小），頁(yè)面滾動(dòng)。如果dom操作比較復(fù)雜，還不間斷的觸發(fā)事件。這將會(huì)造成性能上的損失，導(dǎo)致瀏覽器卡頓,用戶體驗(yàn)下降。

所以針對(duì)此類事件則需要進(jìn)行節(jié)流，或者防抖動(dòng)處理。

一、節(jié)流-throttle 
在指定時(shí)間內(nèi)，讓函數(shù)只觸發(fā)一次。

規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間，觸發(fā)了多次的回調(diào)函數(shù)，那也只有一次能生效，其余的作廢。

舉例：

假設(shè)，我們觀察的總時(shí)間為10秒鐘，規(guī)定1秒作為一次事件的最小間隔時(shí)間。

如果觸發(fā)事件的頻率是 0.5s/次

因?yàn)榭刂屏俗疃嘁幻胍淮危l率為0.5s/次，所以每一秒鐘就有一次事件作廢。最終控制成1s/次

實(shí)現(xiàn)：

第一種：采用loadsh庫(kù)的_.throttle()函數(shù)
第二種：滑動(dòng)為例，，我們滾動(dòng)頁(yè)面時(shí)，為使用節(jié)流函數(shù)之前，頻繁觸發(fā)了多次的函數(shù)調(diào)用，函數(shù)調(diào)用中涉及到了dom操作或者接口請(qǐng)求的話，那將會(huì)
進(jìn)行無(wú)數(shù)次的函數(shù)調(diào)用。
采用之后，時(shí)間間隔內(nèi)（這里設(shè)置300ms)多次觸發(fā)了函數(shù)，只執(zhí)行了一次。




    節(jié)流

二、防抖-debounce 
對(duì)于一定時(shí)間段內(nèi)的連續(xù)的函數(shù)調(diào)用，只執(zhí)行一次

原理：其實(shí)就是一個(gè)定時(shí)器，當(dāng)我們觸發(fā)一個(gè)事件時(shí)，setTimeout讓這個(gè)事件延遲一會(huì)在執(zhí)行。如果在這個(gè)時(shí)間段內(nèi)又觸發(fā)了這個(gè)事件。那么我們就先clear掉這個(gè)定時(shí)器，在重新setTimeout一個(gè)新定時(shí)器來(lái)延遲執(zhí)行。

多次調(diào)用之執(zhí)行一次：

同樣這邊的例子是

假設(shè)，我們觀察的總時(shí)間為10秒鐘，規(guī)定1秒作為一次事件的最小間隔時(shí)間。

如果觸發(fā)事件的頻率是 0.5s/次

因?yàn)槭冀K沒(méi)法等一秒鐘就被再次觸發(fā)了，所以最終沒(méi)有一次事件是成功的。

實(shí)現(xiàn)：

第一種：采用loadsh庫(kù)的_.debounce()函數(shù)
第二種：滑動(dòng)為例，，我們滾動(dòng)頁(yè)面時(shí)，為使用防抖函數(shù)之前，頻繁觸發(fā)了多次的函數(shù)調(diào)用，函數(shù)調(diào)用中涉及到了dom操作或者接口請(qǐng)求的話，那將會(huì)
進(jìn)行無(wú)數(shù)次的函數(shù)調(diào)用。
采用防抖之后，只有在停止滑動(dòng)后，定時(shí)結(jié)束才執(zhí)行函數(shù)處理邏輯。



    防抖

三、區(qū)別

節(jié)流：不管事件觸發(fā)的多頻繁，都會(huì)保證在規(guī)定的時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

防抖：只在最后一次觸發(fā)事件后才執(zhí)行一次函數(shù)

參考：

https://blog.csdn.net/crystal6918/article/details/62236730

https://juejin.im/post/5a35ed25f265da431d3cc1b1

https://www.jianshu.com/p/b73c2acad696

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94681.html

相關(guān)文章

  • JS之節(jié)流和防抖

    摘要：節(jié)流在指定時(shí)間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對(duì)于一定時(shí)間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。總結(jié)以上只是很簡(jiǎn)單的寫了一下節(jié)流和防抖的原理，在里，實(shí)現(xiàn)起來(lái)更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。 概述 在平時(shí)的開發(fā)中，經(jīng)常會(huì)聽到兩個(gè)差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個(gè)類似又有些不同的優(yōu)化方案。 節(jié)流：在指定時(shí)間之內(nèi)，讓函數(shù)只觸發(fā)一次。 防...

    fevin 評(píng)論0 收藏0

  • JavaScript 函數(shù)節(jié)流 throttle 和防抖 debounce

    摘要：今天和別人聊到函數(shù)的節(jié)流和防抖，發(fā)現(xiàn)自己對(duì)這兩個(gè)的區(qū)別很是模糊，遂小小實(shí)踐一下，在此記錄，希望對(duì)需要的人有所幫助。防抖實(shí)現(xiàn)順利，但是兩個(gè)節(jié)流方法的執(zhí)行結(jié)果存在差異。 今天和別人聊到JavaScript函數(shù)的節(jié)流和防抖，發(fā)現(xiàn)自己對(duì)這兩個(gè)的區(qū)別很是模糊，遂小小實(shí)踐一下，在此記錄，希望對(duì)需要的人有所幫助。 節(jié)流 - 頻繁操作，間隔一定時(shí)間去做一件事 舉例說(shuō)明：假定時(shí)間間隔為 500ms，頻繁...

    mmy123456 評(píng)論0 收藏0

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

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評(píng)論0 收藏0

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

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    huaixiaoz 評(píng)論0 收藏0

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

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    CHENGKANG 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<