什麼是前端開發JavaScript防抖

防抖（去抖），以及節流（分流）在日常開發中可能用的不多，但在特定場景，卻十分有用。

最近有同學遇到了要做防抖的需求，那今天李老師就來講解一下，什麼是防抖。為了方便查閱和讓不瞭解防抖和節流的同學能針對性的學習，今天只講解防抖的理解和實踐，節流的內容放到下一次講解。

防抖有兩種模式，延時執行和直接執行，這兩種方式比較容易讓人迷惑，後面我們慢慢講。

什麼是防抖

首先我們先看一個案例需求

以日常開發中常用的搜索按鈕為例，若用戶點擊一次搜索按鈕後，不小心“手抖”很快又點了一次按鈕，防抖可以規避第二次甚至更多次搜索。

第一個搜索按鈕未做任何防抖處理。

搜索按鈕A為第一種防抖模式：延時執行。若用戶連續快速點擊多次，只有最後一次點擊結束，延時一段時間後才執行搜索。

搜索按鈕B為第二種防抖模式：直接執行。若用戶連續快速點擊多次，只有第一次點擊會執行搜索。

通過上面的案例需求來看，我們可以把防抖理解為：如果遇到多次觸發事件，事件處理函數只執行一次。

如何手寫防抖

我們理解了什麼是防抖，那麼我們接下來通過案例來講一下實現防抖的思路。

假設我們需要實現按鈕A的延遲執行的防抖，我們首先需要整理思路：

1.點擊搜索按鈕，函數是不會馬上就執行的，而是等一段時間再執行。

2.若在這段時間裡，按鈕再次被點擊，則出現開始計時，等待同樣的一段時間後再執行。

如果我們要實現這個需求，實現發方案有2種，推薦使用第一種，我們可以使用計時器setTimeout來簡化代碼，這樣我們就可以將重點放在是實現防抖的邏輯上了。

方法一

我們可以先畫一個實現的流程圖

在方法一中，我們的主要核心參數有兩個：

1. 等待時長
2. 計時器

根據流程圖思路實現方法一的防抖代碼：

方法二

我們先畫個流程圖

在方法2中，我們的主要核心參數有兩個：

1. 等待時長
2. 最早可執行時間

根據流程圖實現方法二的防抖代碼：

同樣，我們可以使用類似方法實現搜索按鈕B的功能。按鈕B是實現直接執行防抖。

需求描述：

1. 點擊搜索按鈕後，函數馬上執行。只有等待一段時間後被點擊才能執行函數。
2. 若在這段時間內按鈕被點擊，則重新計時。

我們先畫一個基本的流程圖：

核心參數：

1. 等待時長
2. 計時器

根據我們的流程圖，實現代碼：

接下來就具體測試就可以了，大家可以自己寫一遍，自行做一次測試

總結

防抖是一個高階函數，能夠將多個事件函數合併為一個，在“調整window尺寸”，“在搜索框中實時搜索鍵入文本”， “滾動滾動條”和“防止搜索按鈕頻繁點擊觸發多餘請求”等案例中，十分有用。