節流與防抖

2021-08-19 11:02:00 字數 1302 閱讀 1764

瀏覽器中某些計算和處理要比其他的昂貴,例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件,連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起,有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize事件處理程式內部如果嘗試進行dom操作,其高頻率的更改可能會讓瀏覽器崩潰。為了解決短時間內重複呼叫事件的這個問題,可以使用函式節流和抖動方法。

函式節流背後的思想是指某些**不可以在沒有間斷的情況下連續重複執行。第一次呼叫函式,建立乙個定時器,在指定的時間間隔之後執行**。當第二次呼叫該函式時,它會清除前一次的定時器並設定另乙個。如果前乙個定時器已經執行過了,這個操作就沒有任何意義。然而,如果前乙個定時器尚未執行,其實就是將其替換為乙個新的定時器。目的是只有在執行函式的請求停止了一段時間之後才執行。實現函式的基本模式如下:

var processor = ,

//初始處理呼叫的方法

percess: function

(),100)

}};//嘗試開始執行

processor.process();

這個模式可以使用throttle()函式來簡化,這個函式可以自動進行定時器的設定和清除,如下例:

function

throttle

(method,context),100);

}

throttle()函式接受兩個引數,執行的函式和作用域。

前面提到,節流在resize事件中最常用。如果你基於該事件來改變頁面布局的話,最好控制處理事件的頻率。假設有乙個元素需要保持它的高度始終等於寬度那麼實現這一功能的函式如下:

function

resizediv

()

考慮到節流的話就可以用到throttle()函式了,用例如下:

function

resizediv

()window.onresize = function

()

只要**是週期性執行的,都應該使用節流。

防抖意思是防止抖動,事件連續觸發,延遲一段時間再執行,如果在延遲的時間內繼續觸發,會重新計算時間。

function

debounce

(), 1000);

}}window.onscroll=debounce();

防抖與節流

防抖 當事件持續觸發,一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發,在一秒內只能觸發一次。比如滾動條持續向下滾動,載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中,我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料,根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步,那麼當使用者的操作十分頻繁時,就會多出許多無用的事件操作,並加重瀏覽器的負擔,影響頁面的效能。這時我們可以採用debounce 防抖 和thr...

防抖與節流

防抖和節流在很多場景下都可以有效的提公升程式的效能和減輕伺服器的壓力.估計大多數人都使用過這兩個工具函式 例如在lodash中以函式或裝飾器的模式to use 那麼如何實現自己的防抖和節流函式呢?定義 實現 具體思路的在注釋中體現,因為並不複雜 防抖 函式防抖 param fn 頻繁觸發的函式 ty...