概述
也是好久沒更新 源碼解讀晾匠，看著房價蹭蹭暴漲场晶，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎）
言歸正傳进泼，今天要介紹的是 underscore 中兩個重要的方法母谎，函數節(jié)流和函數去抖亡电。這篇文章不會涉及具體的代碼實現（關于代碼實現請期待下文）碟刺，會從零開始介紹函數節(jié)流和函數去抖的概念跋核，辨析應用場景。為什么我對這兩個方法情有獨鐘要花大篇幅去介紹仔拟？因為就是它們帶我入了「underscore 源碼解讀」的坑（詳見 一次發(fā)現underscore源碼bug的經歷以及對學術界『拿來主義』的思考）衫樊。
函數節(jié)流和去抖的出現場景飒赃，一般都伴隨著客戶端 DOM 的事件監(jiān)聽利花。舉個例子科侈，實現一個原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路監(jiān)聽 mousemove 事件炒事，在回調中獲取元素當前位置臀栈，然后重置 dom 的位置（樣式改變）。如果我們不加以控制挠乳，每移動一定像素而觸發(fā)的回調數量是會非常驚人的权薯，回調中又伴隨著 DOM 操作，繼而引發(fā)瀏覽器的重排與重繪睡扬，性能差的瀏覽器可能就會直接假死盟蚣，這樣的用戶體驗是非常糟糕的。我們需要做的是降低觸發(fā)回調的頻率卖怜，比如讓它 500ms 觸發(fā)一次屎开，或者 200ms，甚至 100ms马靠，這個閾值不能太大奄抽，太大了拖拽就會失真，也不能太小甩鳄，太小了低版本瀏覽器可能就會假死逞度，這樣的解決方案就是函數節(jié)流，英文名字叫「throttle」妙啃。函數節(jié)流的核心是档泽，讓一個函數不要執(zhí)行得太頻繁，減少一些過快的調用來節(jié)流揖赴。
說完函數節(jié)流茁瘦，再看它的好基友函數去抖（debounce）。思考這樣一個場景储笑，對于瀏覽器窗口甜熔，每做一次 resize 操作，發(fā)送一個請求突倍，很顯然腔稀，我們需要監(jiān)聽 resize 事件，但是和 mousemove 一樣羽历，每縮泻嘎病（或者放大）一次瀏覽器，實際上會觸發(fā) N 多次的 resize 事件秕磷，用節(jié)流诵闭？節(jié)流只能保證定時觸發(fā)，我們一次就好，這就要用去抖疏尿。簡單的說瘟芝，函數去抖就是對于一定時間段的連續(xù)的函數調用，只讓其執(zhí)行一次褥琐。
throttle 應用場景
函數節(jié)流有哪些應用場景锌俱？哪些時候我們需要間隔一定時間觸發(fā)回調來控制函數調用頻率？
- DOM 元素的拖拽功能實現（mousemove）
- 射擊游戲的 mousedown/keydown 事件（單位時間只能發(fā)射一顆子彈）
- 計算鼠標移動的距離（mousemove）
- Canvas 模擬畫板功能（mousemove）
- 搜索聯(lián)想（keyup）
- 監(jiān)聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后敌呈，只有用戶停止?jié)L動后贸宏，才會判斷是否到了頁面底部；如果是 throttle 的話磕洪，只要頁面滾動就會間隔一段時間判斷一次 https://github.com/hanzichi/underscore-analysis/issues/21#issuecomment-252802650
debounce 應用場景
函數去抖有哪些應用場景吭练？哪些時候對于連續(xù)的事件響應我們只需要執(zhí)行一次回調？
- 每次 resize/scroll 觸發(fā)統(tǒng)計事件
- 文本輸入的驗證（連續(xù)輸入文字后發(fā)送 AJAX 請求進行驗證析显，驗證一次就好）
小結
函數節(jié)流和函數去抖的核心其實就是限制某一個方法被頻繁觸發(fā)线脚，而一個方法之所以會被頻繁觸發(fā)，大多數情況下是因為 DOM 事件的監(jiān)聽回調叫榕，而這也是函數節(jié)流以及去抖多數情況下的應用場景浑侥。至于函數節(jié)流和去抖方法的具體代碼實現以及調用方式，下文我們再做分享晰绎。
附另外兩篇關于 underscore 函數節(jié)流以及去抖源碼剖析的文章
