節流和防抖 區別和實現

2022-03-04 17:17:10 字數 885 閱讀 8443

實現:

/**

* 函式節流:開始會執行一次,持續觸發事件的話,每隔wait時間執行一次;

* 應用場景mousemove, scroll等會連續執行的事件,比較適合應用於動畫相關的場景。

* @param fn 需要節流的函式

* @param wait 間隔時間

*/export function throttle(fn, wait = 1000)

}}

使用:

mounted() , 5000))

);},

destroyed()

實現:

/**

* 函式防抖:觸發事件的wait 時間後才執行; 如果wait 時間內事件持續被觸發,則以新觸發的時間為標準,然後wait 時間後再執行;

(不持續觸發,wait 時間後執行一次;如果持續觸發,以最後觸發為準,也wait 時間後只執行一次)

* 應用場景: 輸入驗證,提交按鈕點選事件

* @param fn 需要防抖的函式

* @param wait 等待時間

*/function debounce(fn, wait = 1000) , wait);

}}

以上持續觸發是指wait時間內觸發兩次以上:

不持續觸發時(wait時間內只觸發一次): 節流只在觸發時執行一次;防抖會在觸發事件wait時間後執行一次;

持續觸發(wait時間內觸發兩次以上): 節流在每乙個wait時間開始都會執行一次;防抖會在最後一次觸發的wait時間後只執行一次

節流和防抖解釋起來比較混亂,要自己多去使用,並結合實現的**,才慢慢會有所體會。

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

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

防抖和節流

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

防抖和節流

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