一、前言
以下場景往往由于事件頻繁被觸發，因而頻繁執行DOM操作、資源加載等重行為，導緻UI停頓甚至浏覽器崩潰。
1. window對象的resize、scroll事件
2. 拖拽時的mousemove事件
3. 射擊遊戲中的mousedown、keydown事件
4. 文字輸入、自動完成的keyup事件
實際上對于window的resize事件，實際需求大多為停止改變大小n毫秒後執行後續處理；而其他事件大多的需求是以一定的頻率執行後續處理。針對這兩種需求就出現了debounce和throttle兩種解決辦法。
二、什麼是debounce
1. 定義
如果用手指一直按住一個彈簧，它将不會彈起直到你松手為止。
也就是說當調用動作n毫秒後，才會執行該動作，若在這n毫秒内又調用此動作則将重新計算執行時間。
接口定義：
<a></a>
2. 簡單實作
三、什麼是throttle
如果将水龍頭擰緊直到水是以水滴的形式流出，那你會發現每隔一段時間，就會有一滴水流出。
也就是會說預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然後進入下一個新周期。
接口定義：
四、underscore v1.7.0相關的源碼剖析
1. _.throttle函數
2. _.debounce函數
_.debounce實作的精彩之處我認為是通過遞歸啟動計時器來代替通過調用clearTimeout來調整調用func函數的延時執行。
五、總結
throttle和debounce均是通過減少實際邏輯處理過程的執行來提高事件處理函數運作性能的手段，并沒有實質上減少事件的觸發次數。兩者在概念了解上确實比較容易令人混淆，結合各js庫的具體實作進行了解效果将會更好。
六、參考
http://www.alloyteam.com/2012/11/javascript-throttle/
http://www.cnblogs.com/ambar/archive/2011/10/08/throttle-and-debounce.html
如果您覺得本文的内容有趣就掃一下吧！捐贈互勉！
<a href="http://home.cnblogs.com/u/fsjohnhuang/">^_^肥仔John</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followees">關注 - 85</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followers">粉絲 - 707</a>
<a>+加關注</a>
8
評論清單
很實用，謝謝樓主的分享。
不客氣，共同進步啦
http://pic.cnblogs.com/face/347002/20141205140116.png
remaining>wait，表示用戶端系統時間被調整過
原來如此，謝謝了！
怎麼感覺throttle的簡單實作不對，last = curr; 應該在if語句裡面
确實是，謝謝指正！
非常詳細. 剛去看了一下underscore1.8.3的源碼debounce的實作方式, 作者改成調整timeout實作, 而不是遞歸setTimeout了, 部落客怎麼看
闊以的
http://pic.cnblogs.com/face/983944/20160712113551.png
throttle:觸發-上次動作執行時間〉大于限制時間->執行動作，記錄執行時間
debounce:觸發-記錄觸發時間-上次動作觸發時間〉大于限制時間-執行動作
寫得挺好的
謝謝！
debounce的簡單實作是不是有點問題？
http://pic.cnblogs.com/face/1018217/20170216113608.png
<a href="http://www.ucancode.com/index.htm" target="_blank">【推薦】超50萬VC++源碼: 大型工控、組态\仿真、模組化CAD源碼2018！</a>
<a href="https://cloud.tencent.com/developer/support-plan?fromSource=gwzcw.710852.710852.710852" target="_blank">【推薦】加入騰訊雲自媒體扶持計劃，免費領取域名&伺服器</a>
<b>最新IT新聞</b>:
<b>最新知識庫文章</b>:
<a href="https://github.com/fsjohnhuang" target="_blank">肥仔John@github</a>
作品：