我們經常會需要繫結一些持續觸發的事件，如 resize、scroll、mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。函式防抖和節流就是一種很好的解決辦法。
下面的vue例子中，想要實現左側中的搜尋關鍵字功能，這時給input標籤註冊了乙個input事件，然而，input事件在輸入框每次值改變時都會觸發，如右圖所示。
這時，我們監測網路請求時就會發現乙個問題，如下圖。這樣頻繁地請求會給伺服器造成很大的壓力。
上面input事件繫結的函式**為：
async handleinput () )想要解決這個頻繁請求的問題，可以進行如下的**操作（可以限制請求次數、但不是防抖）：this.resultlist = resultres.data.message
}
async handleinput ()可以看出，上面的**中是通過在data中定義乙個變數isloading並設定初始值為false，在初次請求時，將isloading的值更改為true，只有當這次請求成功時才會重新將isloading的值改為false。如果當次請求不成功，isloading的值為true的情況下，呼叫這個函式時，會直接返回而不傳送請求。this.isloading = true
let resultres = await request('goods/qsearch', 'get', )
this.resultlist = resultres.data.message
this.isloading = false
}
這時在重新監測一下網路請求，結果如下。可以看出請求的次數有所減少。
但是，在網路狀況好的情況下，請求還會過於頻繁，下面就使用防抖的方法。
handleinput () )上面的**中，通過設定延時定時器，先將函式放到定時器佇列中，1秒後才執行定時器內部操作。但是，因為有了cleartimeout這個清除定時器的操作，當輸入快速而頻繁觸發函式handleinput時，每次都會清除上一次觸發時建立的定時器。只有當使用者輸入並間隔一秒後，才會執行定時器中的**，這就有效地減少了網路請求次數。效果如下圖。this.resultlist = resultres.data.message
}, 1000)
}
可以看出，這樣有效地減輕了伺服器壓力，當然，通過節流的方式也可以解決這個問題。
async handleinput ()但是如果考慮實際需求的話，使用防抖的方式解決上述情況的效果要比節流好（因為使用者就是需要在每次輸入結束的時候觸發請求**，呼叫介面獲取資料）。this.isloading = true
let resultres = await request('goods/qsearch', 'get', )
this.resultlist = resultres.data.message
this.timer = settimeout(() => , 1000)
}
我們可以舉乙個適合使用函式節流的例子，就是頁面觸底時需要載入更多資料的時候。（後面有實際例子的時候再補上）
防抖與節流方案 函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...