小白坐在工位上，翹著二郎腿兒，不停的抖動著，晃動的頻率極其的快，把老麥克剛泡的咖啡都震出了漣漪，老麥克向小白拋了個眼神兒，誰知道人家盯著電腦一點沒注意到。於是老麥克再也人不住了。
“小白，穩住，別抖了！再抖下去公司的大樓都被你給振倒了。”
小白尷尬一笑：“對不住啊，剛才再思考問題，沒注意到，抱歉抱歉”
“哎呦，什麼問題，說來聽聽”
“我寫了一個方法，它對鍵盤的keyUp事件進行了監聽，也就是說每次按鍵抬起都會有一次調用”。
“這聽起來好像沒什麼問題啊！”
“但是如果如每次keyUp的時候都向服務器發起一次請求會怎麼樣？會不會導致請求太快太多而卡死呢？”
“哈哈，確實會有這樣的業務場景，你可以先讓他別抖動！”麥克說。
小白看了下自己的腿，說：“我沒抖啊”
“我的意思說，你可以寫一個防抖函數 debounce 來進行優化！”
先把你寫的監聽keyUp的函數給我看下，我們一起來進行優化。
小白的代碼
執行結果
防抖(debounce)函數
防抖函數其實就是減少前端向服務器的頻繁請求，減少服務器的壓力，試想如果服務器響應慢的話，將會是多麼糟糕的用戶體驗，少年那就防抖（debounce）吧。
防抖函數寫完了。是不是很簡單。接下來使用下看看效果。
我們每次keyup會有一個100毫秒的延遲，讓服務器的訪問不至於太頻繁。但是這個防抖debounce函數還是有些問題。
- setText的上下文問題
- 第一次調用是不需要有延遲的。
那麼我來對這兩點進行優化，修改debounce函數如下：
firstTime變量用來判斷防抖函數是不是第一次執行，如果是第一次執行則不需要延遲直接調用func方法，如果不是第一次執行則執行setTimeout函數延遲執行func。另外通過apply修改了func的上下文也就是this 的指向。讓他指向了調用它的DOM元素。那麼我們完整的代碼如下。
附上代碼：
<title>Document/<title>
總結
防抖(debounce)函數就是用來減少頻繁調用事件處理函數。減少瀏覽器的負擔，優化用戶體驗，多用於窗口的resize、scroll，輸入框內容校驗等操作時。
閱讀更多 前端講書人麥克黑 的文章
關鍵字: 瀏覽器 JavaScript 小白
