為什麼需要防抖和節流？
在前端會出現一種情況，就是某些事件的觸發會比較頻繁，比如：onmousemove,onscroll,onclick，resize等等。這些事件的觸發是比較頻繁的，那麼其對應的事件處理函式就會頻繁執行，如果事件處理函式的邏輯簡單還好說，要是事件處理函式的邏輯比較複雜，或者說事件處理函式附帶了很多前端效果的話，不僅僅會影響效能，還會造成很多意向不到的問題。
那麼，為了解決這些問題，也從使用者體驗的角度出發，有防抖和節流兩種方案。
一、防抖
1.定義
所謂防抖就是，在固定的時間內，事件處理函式僅執行一次。舉個例子，我們通過**控制，讓某個時間處理函式在每5s內僅觸發一次，那麼即使使用者的操作再頻繁，那麼兩次觸發的時間最小是 5s，這在一定程度上就可以控制使用者的觸發頻率。
防抖本質上就是清除尚未執行的定時器
2.舉例說明（onmousemove事件：在定時器裡滑鼠滑過div就列印『document』）
"box"
>
div>
#box
let timer =
null
document.
onmousemove=(
)=>
,100
)}
1.定義：
所謂節流就是，事件處理函式觸發一次，等待一定的時間之後，才會被允許再次觸發。可以理解為當事件處理函式被觸發後，就進入冷卻期，等冷卻期結束後，才可以再次被觸發
節流本質上就是讓事件在固定的時間執行一次
2.舉例說明（用上面的div）：
let isdo =
true
//是否可以執行
document.
getelementbyid
('box').
onclick=(
)=>
,1000)}
}
從**上看，我們發現這兩種方式都是在限制使用者的觸發頻率，但是不同的是：
假設時間處理函式一直在頻繁觸發的狀態下
防抖的方式會讓該事件處理函式一直不觸發，等頻繁觸發結束的時候僅觸發一次
節流的方式會讓該事件處理函式按照我們設定的時間，週期性的觸發。
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...
防抖和節流
在前端開發過程中，我們經常需要繫結一些持續觸發事件，如 resize scroll mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...
防抖和節流
防抖和節流的作用都是防止函式多次呼叫。區別在於，假設乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。如下例，對...