防抖和節流

防抖（debounce）

原理：在事件被觸發n秒後再執行**，如果在這n秒內又被觸發，則重新計算時間。（最後一次優先）

例子：如果有人進電梯，那電梯將在10秒鐘後出發，這時如果又有人進電梯了，我們又得等10秒再出發。

思路：通過閉包維護乙個變數，此變數代表是否已經開始計時，如果已經開始計時則清空之前的計時器，重新開始計時。

funtion debounce( fn, time )  

timeout = settimeout(fn, time)
} 
} 
// 處理函式
function handle() 
//新增監聽事件
window.addeventlistener('reseize', debounce(handle, 500));

節流（throttle）

原理：規定乙個單位時間，在這個單位時間內，只能有一次觸發事件的**函式執行，如果在同乙個單位時間內某事件被觸發多次，只有一次能生效。（一次優先）

例子：遊戲內的技能冷卻，無論你按多少次，技能只能在冷卻好了之後才能再次觸發

思路：通過閉包維護乙個變數，此變數代表是否允許執行函式，如果允許則執行函式並且把該變數修改為不允許，並使用定時器在規定時間後恢復該變數。

function throttle ( fn, time ) , time)

} 
} }

函式防抖和函式節流都是防止某一時間頻繁觸發，但是這兩兄弟之間的原理卻不一樣。

函式防抖是某一段時間內只執行一次，而函式節流是間隔時間執行。

使用場景

debounce

1.search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。

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

throttle

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

2.監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷。

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

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

防抖和節流

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

防抖和節流

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