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

資訊專欄INFORMATION COLUMN

理解節流和防抖

zebrayoung / 2944人閱讀

摘要：所以針對此類事件則需要進行節流，或者防抖動處理。節流判斷是否已空閑，如果在執行中，則直接函數節流二防抖對于一定時間段內的連續的函數調用，只執行一次原理其實就是一個定時器，當我們觸發一個事件時，讓這個事件延遲一會在執行。

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

所以針對此類事件則需要進行節流，或者防抖動處理。

一、節流-throttle 
在指定時間內，讓函數只觸發一次。

規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間，觸發了多次的回調函數，那也只有一次能生效，其余的作廢。

舉例：

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

如果觸發事件的頻率是 0.5s/次

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

實現：

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




    節流

二、防抖-debounce 
對于一定時間段內的連續的函數調用，只執行一次

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

多次調用之執行一次：

同樣這邊的例子是

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

如果觸發事件的頻率是 0.5s/次

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

實現：

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



    防抖

三、區別

節流：不管事件觸發的多頻繁，都會保證在規定的時間內一定會執行一次真正的事件處理函數。

防抖：只在最后一次觸發事件后才執行一次函數

參考：

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94681.html

相關文章

  • JS之節流和防抖

    摘要：節流在指定時間之內，讓函數只觸發一次。防抖對于一定時間段的連續的函數調用，只讓其執行一次。總結以上只是很簡單的寫了一下節流和防抖的原理，在里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。 概述 在平時的開發中，經常會聽到兩個差不多很相近的詞。節流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優化方案。 節流：在指定時間之內，讓函數只觸發一次。 防...

    fevin 評論0 收藏0

  • JavaScript 函數節流 throttle 和防抖 debounce

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

    mmy123456 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    huaixiaoz 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    CHENGKANG 評論0 收藏0

發表評論

0條評論

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