防抖和節流

/**

* 防抖：不管事件觸發頻率多高，一定在事件觸發 n 秒後才執行，如果在乙個事件執行的 n秒內又觸發了這個事件，就以新的事件的時間為準
* @callback fn  -被呼叫的函式 
* @param  [wait = 300] -定時器時間  
* @param  [immediate = false] -是否要立即執行一次  
*/export function debounce(fn, wait = 300, immediate = false) , wait)
}}

window.addeventlistener('resize', debounce(function() {}, 200));

mehtod: debounce(function() {}, 200)

第一次事件肯定觸發，最後一次不會觸發(比如說監聽 onmousemove，則滑鼠停止移動時，立即停止觸發事件)

function throttle(fn, wait)  

}}

第一次事件不會觸發(fn是放在 settimeout中執行的，所以第一次觸發事件至少等待 wait 毫秒之後才執行)，最後一次一定觸發

function throttle(fn, wait)  , wait)}}

}

兩者結合可以實現，第一次事件會觸發，最後一次事件也會觸發

/**

* 節流： 不管事件觸發頻率有多高，只在單位時間內執行一次
* 第一次事件和最後一次事件都觸發
* @callback fn  -被呼叫的函式 
* @param  [wait = 300] -定時器時間  
*/export function throttle(fn, wait = 300)  else if (!timer) , wait)}}
}

使用方法和防抖一樣

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

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

防抖和節流

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

防抖和節流

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