在前端開發過程中，我們經常需要繫結一些持續觸發事件，如：resize、scroll、mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。
通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。
一、函式的防抖
1、什麼是函式防抖
函式防抖（debounce）:就是讓某個函式在上一次執行之後，滿足等待某個時間內不再觸發此函式後再執行，而在這個等待時間內再次觸發函式，等待時間可以重新計算，知道該函式在一定間隔內沒有被呼叫時，才開始執行被呼叫方法（所謂防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。）
2、應用場景
使用者註冊時候的手機號驗證和郵箱驗證
搜尋框3、通用寫法
去抖案例
4.舉例
我們可能首先想到到的做法就是監聽keypress事件，然後非同步去查詢結果
這個方法本事是沒有錯的，但是如果使用者快速的輸入一連串字元，假設是10個字元，就會在瞬間觸發了10次請求，這無疑不是我們想要的。
我們想要的是使用者停止輸入的時候才去觸發查詢的請求，這個時候函式防抖可以幫助我們。
二、函式節流
1、什麼是函式節流
函式節流（throttle）:是讓乙個函式無法在很短的時間間隔內連續呼叫，當上一次執行完之後過了規定的時間間隔，才能進行下一次的函式呼叫。（所謂節流，就是指連續觸發事件但是在n秒中只執行一次函式）節流會稀釋函式的執行頻率。
即每間隔某個事件去執行某個函式，避免函式的過多執行，這個方式就叫函式節流
2、應用場景
window物件的resize、scroll事件
拖拽時候的mousemove
射擊遊戲中的mousedown、keydown事件
文字輸入、自動完成的keyup事件
3、通用寫法
4、舉例說明
應用場景：滾動瀏覽器滾動條的時候，更新頁面上的某些布局內容或者去呼叫後台的介面查詢內容的時候
同樣的，如果不對函式呼叫的頻率加以限制的話，那麼可能我們滾動一次滾動條就會產生n次的呼叫。
但是這次的情況跟上面的有所不同，我們不是要在每次完成等待某個時間之後才執行函式，而是要每間隔某個時間去執行某個函式，避免函式的過多執行
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...
防抖和節流
在前端開發過程中，我們經常需要繫結一些持續觸發事件，如 resize scroll mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...
防抖和節流
防抖和節流的作用都是防止函式多次呼叫。區別在於，假設乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。如下例，對...