拋下思念17 2022-06-04

防抖和節流的概念其實最早並不是出現在軟體工程中，防抖是出現在電子元件中，節流出現在流體流動中

但是很多前端開發者面對這兩個功能，有點摸不著頭腦：

a。 某些開發者根本無法區分防抖和節流有什麼區別（面試經常會被問到）；

b。 某些開發者可以區分，但是不知道如何應用；

c。 某些開發者會透過一些第三方庫來使用，但是不知道內部原理，更不會編寫；

「在事件被觸發n秒後再執行回撥，如果再這n秒內又被觸發，則重新計算」

Ø 輸入框中頻繁的輸入內容，搜尋或者提交資訊；

Ø 頻繁的點選按鈕，觸發某個事件；

Ø 監聽瀏覽器滾動事件，完成某些特定操作；

Ø 使用者縮放瀏覽器的resize事件；

我們都遇到過這樣的場景，在某個搜尋框中輸入自己想要搜尋的內容

比如想要搜尋一個MacBook：

但是我們需要這麼多次的網路請求嗎？

這就是防抖的操作：只有在某個時間內，沒有再次觸發某個函式時，才真正的呼叫這個函式；

我們透過一個搜尋框來延遲防抖函式的實現過程：

p 監聽input的輸入，透過列印模擬網路請求

n 測試發現快速輸入一個macbook共傳送了7次請求，顯示我們需要對它進行防抖操作：

基本實現

立即執行函式

增加取消功能

效果

規定在一個單位時間內，只能觸發一次函式。如果這個單位時間內觸發多次函式，只有一次生效

節流的實現過程

完善節流

：