說說防抖和節流

防抖（debounce）的定義：觸發高頻函式事件後，n秒內函式只能執行一次，如果在n秒內這個事件再次被觸發的話，那麼會重新計算時間。（最後乙個人說了算）

節流（throttle）的定義：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。（第乙個人說了算）

個人理解防抖和節流的不同點和相同的地方：

區分：防抖動和節流本質是不一樣的。防抖動是將多次執行變為最後一次執行，節流是將多次執行變成每隔一段時間執行。

共同：這兩兄弟的本質都是以閉包的形式存在，每次觸發事件時都判斷當前是否有等待執行的延時函式

鄙人用紙（方便）簡單畫一張幼兒園水平的圖（並非無意貶低幼兒園小朋友），可能還沒啥用：

上面說了那麼多，感覺還是跟沒說一樣，舉一些使用場景來加深理解吧。

防抖可用於：

1、search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。類似以前常使用lodash來解決搜尋防抖的問題。

2、頻繁操作點讚和取消點讚，因此需要獲取最後一次操作結果並傳送給伺服器

節流可用於：

1、點選按鈕，滑鼠不斷點選觸發，mousedown(單位時間內只觸發一次)

2、window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用節流來讓其只觸發一次

下面是實現**

實現防抖：

1

function
debounce(fn) , 500);8};
9}10function
sayhi() 
13 let box = document.queryselector('body')
14 box.addeventlistener('click', debounce(sayhi))

1

function
throttle(fn) , 500);
13};14}
15function
sayhi(e) 
18  window.addeventlistener('resize', throttle(sayhi));

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

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

防抖和節流

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

防抖和節流

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