一、什麼是函數防抖
概念：函數防抖（debounce），就是指觸發事件後，在 n 秒內函數只能執行一次，如果觸發事件後在 n 秒內又觸發了事件，則會重新計算函數延執行時間。
二、爲什麼需要函數防抖
前端開發過程中，有一些事件，常見的例如，onresize，scroll，mousemove ,mousehover 等，會被頻繁觸發（短時間內多次觸發），不做限制的話，有可能一秒之內執行幾十次、幾百次，如果在這些函數內部執行了其他函數，尤其是執行了操作 DOM 的函數（瀏覽器操作 DOM 是很耗費性能的），那不僅會浪費計算機資源，還會降低程序運行速度，甚至造成瀏覽器卡死、崩潰。這種問題顯然是致命的。
除此之外，短時間內重複的 ajax 調用不僅會造成數據關係的混亂，還會造成網絡擁塞，增加服務器壓力，顯然這個問題也是需要解決的。
三、函數防抖如何解決上述問題
根據上面對問題的分析，細細思索，可以想到如下解決方案。
函數防抖的要點，是需要一個 setTimeout 來輔助實現，延遲運行需要執行的代碼。如果方法多次觸發，則把上次記錄的延遲執行代碼用 clearTimeout 清掉，重新開始計時。若計時期間事件沒有被重新觸發，等延遲時間計時完畢，則執行目標代碼。
四、函數防抖的代碼實現
根據以上分析，我們對 “函數防抖” 來進行簡單的代碼實現，如下：
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));
五、函數節流的使用場景
函數防抖一般用在什麼情況之下呢？一般用在，連續的事件只需觸發一次回調的場合。具體有：
- 搜索框搜索輸入。只需用戶最後一次輸入完，再發送請求；
- 用戶名、手機號、郵箱輸入驗證；
- 瀏覽器窗口大小改變後，只需窗口調整完後，再執行 resize 事件中的代碼，防止重複渲染。
目前遇到過的用處就是這些，理解了原理與實現思路，小夥伴可以把它運用在任何需要的場合，提高代碼質量。
總結
函數防抖其實是分爲 “立即執行版” 和 “非立即執行版” 的，根據字面意思就可以發現他們的差別，所謂立即執行版就是 觸發事件後函數不會立即執行，而是在 n 秒後執行，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間。 而 “非立即執行版” 指的是 觸發事件後函數會立即執行，然後 n 秒內不觸發事件才能繼續執行函數的效果。。
在開發過程中，我們需要根據不同的場景來決定我們需要使用哪一個版本的防抖函數，一般來講上述的防抖函數都能滿足大部分的場景需求。但我們也可以將非立即執行版和立即執行版的防抖函數結合起來，實現最終的雙劍合璧版本的防抖函數，以下爲小夥伴們做了簡單的實現：
/**
* @desc 函數防抖---“立即執行版本” 和 “非立即執行版本” 的組合版本
* @param func 需要執行的函數
* @param wait 延遲執行時間（毫秒）
* @param immediate---true 表立即執行，false 表非立即執行
**/
function debounce(func,wait,immediate) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) clearTimeout(timer);
if (immediate) {
var callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timer = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
function handle(){
console.log(Math.random());
}
// window.addEventListener("mousemove",debounce(handle,1000,true)); // 調用立即執行版本
window.addEventListener("mousemove",debounce(handle,1000,false)); // 調用非立即執行版本