對於一些高頻事件，比如視窗的resize, scroll, 輸入框輸入事件、滑鼠移動等事件，如果這些事件處理函式比較複雜或者頁面重新渲染的次數頻繁，那麼會給瀏覽器造成比較大的壓力，效能低下，使用者體驗不好。這時候可以有相應的防抖或節流的方式減少函式觸發的頻率
對於持續觸發的事件，會合併事件而不會立即執行；如果在一定的時間內沒有再次觸發這個事件，那麼才會真正執行這個事件。
有兩種方式：1. 非立即觸發型 2. 立即觸發型
1.非立即觸發型
function debounce (fn, delay, ...rest)
timer = settimeout(() => , delay)
}}
function debounce (fn, delay, ...rest)
let callnow = !timer
timer = settimeout(() => , delay)
}}
有兩種方式： 1、時間戳版 2、定時器版
時間戳版
function throttle(fn,delay, ...rest)
} }
function throttle(fn, delay, ...rest) , delay)
} }}
防抖：1. 搜尋框，在input中不斷輸入值時，用發抖來節省請求資源
2. 視窗的resize事件，不斷的調整視窗的大小來觸發事件，通過防抖只觸發一次
參考：
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...
防抖和節流
在前端開發過程中，我們經常需要繫結一些持續觸發事件，如 resize scroll mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...
防抖和節流
防抖和節流的作用都是防止函式多次呼叫。區別在於，假設乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。如下例，對...