這篇文章講概念帖旨、應(yīng)用場景和實現(xiàn)思路，源碼在最后面彬呻。
性能和速度是程序的敵人衣陶，以致于每一個優(yōu)秀的程序員都在孜孜不倦的提升軟件的性能和速度，從而提升產(chǎn)品的用戶體驗闸氮。
下面介紹的是debounce和throttle剪况，這兩種技術(shù)能夠改善程序的性能，它們非常相似但是不同的技術(shù)蒲跨。
當(dāng)dom事件被頻繁觸發(fā)時译断，使用debounce或throttle就非常有用了，因為它能夠在事件和函數(shù)執(zhí)行之間添加一層控制或悲。
這里推薦使用Lodash工具庫孙咪，引入后直接使用_.debounce 和 _.throttle,非常簡單和方便，當(dāng)然前提是需要理解它們的作用巡语。
debounce防抖動
debounce允許我們把一組調(diào)用壓縮為單個調(diào)用翎蹈。
想象一下你在電梯里面，門準(zhǔn)備關(guān)上男公，突然荤堪，有人闖進(jìn)來，這時電梯不會開始移動枢赔，而是門重新打開澄阳，然后等待一會。如果還有人進(jìn)來踏拜，它會重復(fù)這一過程碎赢，直到?jīng)]有人再進(jìn)來，最后門自動關(guān)上速梗，電梯開始在樓層間移動肮塞。這是為什么？因為工程師們也對電梯進(jìn)行了資源優(yōu)化镀琉，用更少的資源完成任務(wù)峦嗤，充分發(fā)揮電梯的效用。這個電梯的例子跟debounce的應(yīng)用場景非常相似屋摔。
應(yīng)用場景：
- 調(diào)整resize烁设。
當(dāng)監(jiān)聽了窗口的resize事件時，并且調(diào)整瀏覽器窗口大小的時候，會觸發(fā)大量的resize事件装黑，所以呢當(dāng)你拖拽的時候副瀑，調(diào)用處理函數(shù)做大量計算的時候，會發(fā)現(xiàn)拖拽的過程有點卡頓恋谭，掉幀糠睡。
這時我們可以使用debounce，因為我們關(guān)注的是最終值疚颊，也就是我們最后停止拖動瀏覽器窗口的值狈孔。
- input的輸入和發(fā)送請求。
在input里輸入文字然后發(fā)送網(wǎng)絡(luò)請求材义，有一種較優(yōu)的方案就是期望用戶輸入完畢然后再發(fā)送網(wǎng)絡(luò)請求均抽，而不是輸入的過程中不斷的發(fā)出請求，這能有效的優(yōu)化網(wǎng)絡(luò)服務(wù)其掂。
throttle節(jié)流
throttle 只允許在每x毫秒內(nèi)執(zhí)行一次操作油挥。
它跟debounce的不同主要是：throttle的執(zhí)行是有規(guī)律的，會每x毫秒內(nèi)執(zhí)行一次款熬。
使用場景：
一個相當(dāng)普遍的例子深寥，用戶在使用一個無限滾動的頁面，你需要檢測用戶的位置到底部之間的距離贤牛，如果用戶接近屏幕底部惋鹅，我們應(yīng)該發(fā)送Ajax請求更多內(nèi)容然后添加到頁面上。實現(xiàn)這一功能需要監(jiān)聽頁面的scroll事件盔夜，然而在手機(jī)端緩慢的滾動頁面會觸發(fā)上百次事件负饲，這時候有了throttle就可以對其進(jìn)行優(yōu)化，比如每250ms內(nèi)只調(diào)用一次喂链，這樣用戶基本感覺不到有任何體驗上的差別，也優(yōu)化了程序的性能妥泉。
在這里我們心愛的debounce是不適合的椭微，因為debounce只在用戶停止?jié)L動時才觸發(fā)（調(diào)用）函數(shù)。而我們需要的是在用戶在滾動頁面過程中快要到達(dá)底部的時候獲取更多內(nèi)容盲链，使用throttle才能持續(xù)的進(jìn)行檢測用戶位置到底部之間的距離蝇率。
requestAnimationFrame (rAF)
rAF 是對函數(shù)的執(zhí)行進(jìn)行限速的額外的一種方式。大致等同于_.throttle(dosomething, 16)刽沾。但它可以是throttle的替代者本慕，它更流暢和平滑，它是瀏覽器的標(biāo)準(zhǔn)API侧漓。
根據(jù)經(jīng)驗锅尘，我使用rAF函數(shù)的一些場景主要是繪畫或動畫，重新計算元素的位置等布蔗。
觸發(fā)網(wǎng)絡(luò)請求或決定是否添加/移除一個class(觸發(fā)一個CSS動畫)藤违，我會考慮_.debounce or _.throttle浪腐，使用它們你能更靈活的控制執(zhí)行速率(用200ms替換16ms)。
在underscore或lodash這兩個框架里面都沒有提供或?qū)崿F(xiàn)rAF顿乒，因為使用它非常的簡單议街。
例子：
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
總結(jié)：
使用debounce, throttle and requestAnimationFrame來優(yōu)化你的事件操作。三者的技術(shù)和思路都略微不同璧榄，但它們都是非常有用以及彼此互補特漩。
- debounce：debounce允許我們把一組事件調(diào)用壓縮為單個調(diào)用。
- throttle：每x毫秒執(zhí)行一次骨杂。就像每隔200毫秒檢查一次滾動位置涂身。
- requestAnimationFrame：可以是throttle的替代者，當(dāng)你的函數(shù)為重新計算和渲染元素到屏幕上腊脱，而且你想得到平滑的過渡動畫访得。注意：不支持IE9。
Github:
throttle 和 debounce函數(shù)代碼
實現(xiàn)思路：
- debounce：創(chuàng)建一個指定
x毫秒的setTimeout(fn,x)陕凹，如果在該setTimeout(fn,x)的x毫秒內(nèi)再次產(chǎn)生新的事件悍抑，就會先去取消該setTimeout，然后重新創(chuàng)建一個指定x毫秒的setTimeout(fn,x)杜耙，不斷重復(fù)這一過程搜骡，直到?jīng)]有再產(chǎn)生新的事件，x毫秒后調(diào)用函數(shù)fn佑女。 - throttle：
setTimeout(fn,x - elapsed)记靡。節(jié)流的實現(xiàn)要多兩個額外的變量，一個是記錄上一次函數(shù)fn執(zhí)行的時間(lastExec)团驱，一個是記錄流逝的時間(elapsed) = 當(dāng)前setTimeout創(chuàng)建的時間 - 上一次函數(shù)fn執(zhí)行的時間(lastExec)摸吠，每產(chǎn)生一個新的事件（創(chuàng)建新的setTimeout）,都會先去取消上一個setTimeout，所以它的定時器要這么寫setTimeout(fn,x - elapsed)就能每x毫秒執(zhí)行一次函數(shù)fn了嚎花，每一次函數(shù)fn被執(zhí)行都會更新lastExec的值為當(dāng)前時間寸痢。
參考資料：
https://css-tricks.com/debouncing-throttling-explained-examples/
