歡迎來到我的專題文章《前端面試題》系列，更多精彩內容持續更新中，歡迎關注！

前端面試中，要問面試官最喜歡問什麼？那麼函數的防抖應該算是一個吧。那麼我們今天就來看下Js中函數的防抖究竟是怎麼回事

一般回答這樣的問題，一般的應用場景無非就兩種情況，那就是處理瀏覽器窗口的resize和scroll觸發頻繁的事件和輸入框中輸入內容的時候進行搜索，像百度。

那麼接下來很有必要來解釋一下什麼是函數的防抖。

防抖

函數防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

function debounce(fn, wait) { 
 var timeout = null; 
 return function() { 
 if(timeout !== null) clearTimeout(timeout); 
 timeout = setTimeout(fn, wait); 
 }
}

函數很簡單，簡單來解釋一下，如果用戶在短時間去不停的調用一個函數，程序優先先將上一次的任務清除掉，然後開啟新的任務。

比如，我們需要在瀏覽器窗口縮放的時候去計算一個div的寬高。這時候，先來監聽window對象的resize事件。我們知道，resize事件觸發是非常頻繁的，如果我們同步去更新div的大小，就會造成資源的浪費，那麼加上防抖功能絕對是一個很好的優化方案。

再比如說我們常用的百度搜索。當用戶輸入搜索的關鍵字後就是觸發搜索,但是細心的你是否發現，當你輸入還沒有完成，百度是不會去發請求的。當你與一下次的輸入有一定的時間間隔的時候，才會觸發搜索的請求。

防抖在實際項目中的應用

其實按道理來說，能說出以上兩個應用，那麼對於函數防抖的理解還是很到位的。但是如果作為了一個工作多年的前端開發者，請一定要順帶引出這個知識點在你真實項目中的應用。

以我為例。我先說一下我實際項目中的應用。

我們的項目中採用Electron開發了一套桌面混合應用。頁面中有一個選項卡的功能，當點擊選項卡的時候，會觸發nodeJs請求本地sqlite數據庫獲取數據並且顯示出來。

本來是一個很常規的操作。通過點擊事件觸發nodejs請求數據的過程。一個很典型的數據請示響應模型。

但是這說的只是我們正常的操作，點擊切換選項卡的內容。萬惡的用戶居然來回的不停的點擊切換，然後就直接導致了內存的吃緊，界面的嚴重卡頓。

用戶非正常操作

這時候大家可能想到，防抖能解決這個問題，其實光是靠防抖功能是不能解決的。因為當我點擊完選項卡後，如果頁面沒有數據過來，那麼顯示的還是上一個選項卡的數據，也會導致糟糕的用戶體驗。

一般來說 ，頁面卡，數據半天沒響應過來，那麼最好的解決辦法就是加緩存了。

我的方案

1. 首先，在用戶第一次請求到數據後，將數據緩存到vuex中，當用戶點擊了選項卡，首先切換vuex中緩存的數據。
2. 然後加上防抖，在1000ms後再去請示最新的數據，並更新緩存。
3. 如果用戶迅速切換了選項卡，那麼，通過node請求的操作就會在防抖的作用下取消掉，從而達到了性能的優化。

這其中還有很多的細節要處理，我這裡就不再展開了說了哈，大家知道這個意思就行，面試官一般不會深究你的每一步操作，只會關心你的優化方案。

關於節流的問題，大家可以自己去網上找一下資料吧，我的項目中用的比較少，我們就介紹啦。

總結：

和之前的面試題一樣，即使是面試官只是問你js防抖的問題，我們不僅要說出它的基本原理以及常見的應用。我們也要結合自己的一個實際項目進行擴展，引出自己的一些實際性的應用。這時候就更容易打動面試官了。

希望我的分享能夠幫助到正在或者即將要找工作的你們。

前端面試題有很多，這個專題中我列舉一我遇到過的並且將自己的答案分享出來了。這個專題也將告一段落了。下個專題，我們再見。

這裡是【暢哥聊技術】，下期，我們接著聊。。。