亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

理解節(jié)流和防抖

zebrayoung / 2994人閱讀

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

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

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

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

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

舉例：

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

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

因為控制了最多一秒一次，頻率為0.5s/次，所以每一秒鐘就有一次事件作廢。最終控制成1s/次

實現(xiàn)：

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




    節(jié)流

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

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

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

同樣這邊的例子是

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

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

因為始終沒法等一秒鐘就被再次觸發(fā)了，所以最終沒有一次事件是成功的。

實現(xiàn)：

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



    防抖

三、區(qū)別

節(jié)流：不管事件觸發(fā)的多頻繁，都會保證在規(guī)定的時間內(nèi)一定會執(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94681.html

相關(guān)文章

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

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

    fevin 評論0 收藏0

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

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

    mmy123456 評論0 收藏0

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

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

    didikee 評論0 收藏0

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

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

    huaixiaoz 評論0 收藏0

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

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

    CHENGKANG 評論0 收藏0

發(fā)表評論

0條評論

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