debounce函數(shù)所做的事情是：強(qiáng)制一個函數(shù)在某個連續(xù)的時間段內(nèi)只執(zhí)行一次，哪怕他本來會被調(diào)用多次眠饮，我們希望在用戶停止某個操作一段時間之后才執(zhí)行相應(yīng)的監(jiān)聽函數(shù)拓巧，而不是在用戶操作的過程當(dāng)中持隧，瀏覽器觸發(fā)多少事件谒亦，就執(zhí)行多少監(jiān)聽函數(shù)。
//彈跳函數(shù)
function debounce(fn,delay){
var timer
return function(){
var _this = this;
var args = arguments;
//每次這個返回函數(shù)被調(diào)用汗唱，就清楚定時器宫莱，保證fn不被執(zhí)行
clearTimeout(time);
//當(dāng)返回的函數(shù)被最后一次調(diào)用（用戶停止了某個連續(xù)動作），延遲delay毫秒后執(zhí)行fn
timer = setTimeout(function(){
fn.apply(_this,args);
},delay)
}
}
//調(diào)用
$(document).on('mouvemove', debounce(function(e) {
// 代碼
}, 250))
原理：debounce返回一個閉包哩罪，這個閉包會被連續(xù)平凡的調(diào)用授霸，但在閉包內(nèi)部卻顯示了原始函數(shù)fn的執(zhí)行，強(qiáng)制fn只在連續(xù)操作停止后執(zhí)行一次际插。
使用場景：
1 比如碘耳，在某個 3s 的時間段內(nèi)連續(xù)地移動了鼠標(biāo)，瀏覽器可能會觸發(fā)幾十（甚至幾百）個 mousemove 事件框弛，不使用 debounce 的話藏畅，監(jiān)聽函數(shù)就要執(zhí)行這么多次；如果對監(jiān)聽函數(shù)使用 100ms 的“去彈跳”功咒，那么瀏覽器只會執(zhí)行一次這個監(jiān)聽函數(shù)，而且是在第 3.1s 的時候執(zhí)行的绞蹦。
2 根據(jù)用戶的輸入實時向服務(wù)器發(fā) ajax 請求獲取數(shù)據(jù)力奋。我們知道，瀏覽器觸發(fā) key* 事件也是非秤钠撸快的景殷，即便是正常人的正常打字速度，key* 事件被觸發(fā)的頻率也是很高的澡屡。以這種頻率發(fā)送請求猿挚，一是我們并沒有拿到用戶的完整輸入發(fā)送給服務(wù)器，二是這種頻繁的無用請求實在沒有必要驶鹉。
更合理的處理方式是绩蜻，在用戶“停止”輸入一小段時間以后，再發(fā)送請求室埋。那么 debounce 就派上用場了：
$('input').on('keyup', debounce(function(e) {
// 發(fā)送 ajax 請求
}, 300))
Throttle就是固定函數(shù)執(zhí)行的速率办绝，即所謂的“節(jié)流”伊约。
/**
*
* @param fn {Function} 實際要執(zhí)行的函數(shù)
* @param delay {Number} 執(zhí)行間隔，單位是毫秒（ms）
*
* @return {Function} 返回一個“節(jié)流”函數(shù)
*/
function throttle(fn, threshhold) {
// 記錄上次執(zhí)行的時間
var last
// 定時器
var timer
// 默認(rèn)間隔為 250ms
threshhold || (threshhold = 250)
// 返回的函數(shù)孕蝉，每過 threshhold 毫秒就執(zhí)行一次 fn 函數(shù)
return function () {
// 保存函數(shù)調(diào)用時的上下文和參數(shù)屡律，傳遞給 fn
var context = this
var args = arguments
var now = +new Date()
// 如果距離上次執(zhí)行 fn 函數(shù)的時間小于 threshhold，那么就放棄
// 執(zhí)行 fn降淮，并重新計時
if (last && now < last + threshhold) {
clearTimeout(timer)
// 保證在當(dāng)前時間區(qū)間結(jié)束后超埋，再執(zhí)行一次 fn
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, threshhold)
// 在時間區(qū)間的最開始和到達(dá)指定間隔的時候執(zhí)行一次 fn
} else {
last = now
fn.apply(context, args)
}
}
}
如果還是不能完全體會 debounce 和 throttle 的差異，可以到 這個頁面 看一下兩者可視化的比較佳鳖。
debounce 強(qiáng)制函數(shù)在某段時間內(nèi)只執(zhí)行一次霍殴，throttle 強(qiáng)制函數(shù)以固定的速率執(zhí)行。在處理一些高頻率觸發(fā)的 DOM 事件的時候腋颠，它們都能極大提高用戶體驗繁成。
原文地址：https://blog.csdn.net/redtopic/article/details/69396722
