防抖和節流

2022-07-29 11:33:09 字數 409 閱讀 4614

在使用web網頁時,如果高頻率的觸發某一事件,比如拉滾動條,有可能造成頁面抖動問題

防抖:在一定時間內,規定允許事件觸發的次數

通過設定定時器,觸發事件。在定時器首部,會首先清除之前的定時器,以達到規定時間內只能觸發一次。如果此時上一次定時器還沒有達到指定時間,又建立了新的定時器,之前的定時器就會被清除,從而不會執行上一次事件,達到效果。

節流:保證在規定時間內事件至少被觸發一次

在防抖中,如果一直在上一次定時器未達到指定時間時觸發下一次定時器,就永遠不會觸發事件。不能實現懶載入中不斷載入或者傳送ajax請求的效果。

因此節流中設定了mustrun屬性,設定在超過規定時間後如果沒有觸發事件,必須觸發,如果沒有超過規定時間,重新設定定時器

達到了減少一定時間內觸發事件的頻率,但保證在一定時間內一定會觸發一次事件。

防抖和節流 什麼是防抖和節流

目錄二 節流 有這樣一種情況,想象有乙個表單,點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次,又或者是惡意點選,那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖,實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候,將...

防抖和節流

在前端開發過程中,我們經常需要繫結一些持續觸發事件,如 resize scroll mousemove等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下,我們怎麼去解決呢?一般來講,防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...

防抖和節流

防抖和節流的作用都是防止函式多次呼叫。區別在於,假設乙個使用者一直觸發這個函式,且每次觸發函式的間隔小於設定的時間,防抖的情況下只會呼叫一次,而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。如下例,對...