函數(shù)節(jié)流（throttle）和去抖（debounce）的應(yīng)用場景穆趴，一般伴隨著客戶端DOM事件監(jiān)聽氓奈。舉個例子葡幸，實現(xiàn)一個原生的拖拽功能（不用H5 Drag&Drop API）氓仲，需要一路監(jiān)聽mousemove事件坦仍，在回調(diào)中獲取元素當(dāng)前位置鳍烁，然后重置dom的位置（樣式改變）。如果我們不加以控制繁扎，每移動一定像素而出發(fā)的回調(diào)數(shù)量是會非常驚人的幔荒，回調(diào)中又伴隨著DOM操作，然而引發(fā)瀏覽器重排和重繪梳玫，性能差的瀏覽器可能就會直接假死爹梁，這樣的用戶體驗是非常糟糕的。** 我們需要做的是降低出發(fā)回調(diào)的頻率 提澎， 比如讓它500ms出發(fā)一次姚垃，或者200ms，甚至100ms盼忌，這個閾值不能太大积糯，太大了拖拽就會失真掂墓，也不能太小，太小了低版本瀏覽器可能就會假死絮宁，這樣的解決方案就是 函數(shù)節(jié)流 **梆暮，英文名字叫做[throttle]。函數(shù)節(jié)流的核心： **讓一個函數(shù)不要執(zhí)行得太頻繁绍昂，減少一些過快的調(diào)用來節(jié)流 ** 啦粹，可以理解為間隔時間段觸發(fā)。
說完函數(shù)節(jié)流窘游，再看它的好基友函數(shù)去抖（debounce）唠椭。思考這樣一個場景，對于瀏覽器窗口忍饰，每做一次resize操作贪嫂，發(fā)送一個請求，很顯然艾蓝，我們需要監(jiān)聽resize事件力崇，但是和mousemove一樣，每縮杏（或者放大）一次瀏覽器亮靴，實際上會出發(fā)N多次的resize事件，用節(jié)流于置？節(jié)流只能保證定時觸發(fā)茧吊，我們一次就好，這就要用去抖八毯。簡單的說搓侄，函數(shù)去抖就是對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次话速。
throttle的應(yīng)用場景
函數(shù)節(jié)流有哪些應(yīng)用場景讶踪？哪些時候我們需要間隔一定時間出發(fā)回調(diào)來控制函數(shù)調(diào)用頻率？
- DOM元素的拖拽功能實現(xiàn)（mousemove）
- 射擊游戲的mousedown/keydown事件（單位時間只能發(fā)射一顆子彈）
- 計算鼠標(biāo)移動的距離（mousemove）
- Canvas模擬畫板功能（mousemove）
- 搜索聯(lián)想（keyup）
- 監(jiān)聽滾動事件判斷是否到頁面底部自動加載更多：給scroll加了debounce后泊交，只有用戶停止?jié)L動后俊柔，才會判斷是否到了頁面底部；如果是throttle的花活合，只要頁面滾動就會間隔一段時間判斷一次
debounce應(yīng)用場景
函數(shù)去抖有哪些應(yīng)用場景？哪些時候?qū)τ谶B續(xù)的事件響應(yīng)我們只需要進(jìn)行一次回調(diào)物赶？
- 每次resize/scroll觸發(fā)統(tǒng)計事件
- 文本輸入的驗證（連續(xù)輸入文字后發(fā)送AJAX請求進(jìn)行驗證白指，驗證一次就好）
下面貼上throttle和debounce的demo:
throttle:
function throttle(fn, delta, context) {
var safe = true;
return function() {
var args = arguments;
if(safe) {
fn.call(context, args)
safe = false
setTimeout(function() {
safe = true
}, delta)
}
}
}
function T() {
document.body.innerHTML += 'T<br>'
}
window.addEventListener('mousemove', throttle(T, 1000));
debounce:
function debounce(fn, delta, context) {
var timeoutID = null;
return function() {
if(timeoutID) {
clearTimeout(timeoutID);
}
var args = arguments;
timeoutID = setTimeout(function() {
fn.apply(context, args);
}, delta);
}
}
function D() {
document.body.innerHTML += 'D<br>'
}
window.addEventListener('mousemove', debounce(D, 1000));
小結(jié)
函數(shù)節(jié)流和函數(shù)去抖的核心其實就是限制某一個方法被頻發(fā)觸發(fā)，而一個方法之所以會被頻發(fā)觸發(fā)酵紫，大多數(shù)情況下因為DOM事件的監(jiān)聽回調(diào)告嘲，而這也是函數(shù)節(jié)流以及去抖多數(shù)情況下的應(yīng)用場景错维。
文章轉(zhuǎn)自https://github.com/hanzichi/underscore-analysis/issues/20
