什麼是防抖和節流?

2022-09-05 15:51:17 字數 759 閱讀 6491

雖然二者都有延遲當前動作的反饋,但是防抖的延遲時間是確定的,延遲週期內如果有新動作進入,舊的動作將會被取消。

而節流是提前設定了乙個閥門,只有當閥門開啟的時候,該動作才有機會執行。如果閥門是關閉的,那這個動作就不會進入執行區。個人理解防抖是後置的處理高頻事件方式,而節流是前置處理。防抖機制隱含了乙個優先順序的概念,後到的先執行,因此事件的進入事件越晚優先順序實則越高,而優先順序最高的具備執行權,而進入時間這個准入條件是不由開發者提前預設的,事件的執行更加離散無規則。而緩衝機制並沒有為事件分配權重,只是設定了乙個均勻頻率的訊號量,該訊號量的開啟和關閉是決定能否進入執行區的條件,而與事件無關,准入條件是人為設定的,相對來說執行更規律。

/**

* 帶有立即執行的防抖

* @param fn

* @param wait

* @param immediate

*/function debounce(fn, wait = 50, immediate = true)

}, wait);

}return function (...params) else

} else

}}debounce(()=>,50,false)()

const throttle=(fn, wait = 50)=>, wait);

}}let func = throttle(()=>,1050)

func()

func()

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

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

防抖和節流

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

防抖和節流

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