防抖：就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果在 n 秒內(nèi)又觸發(fā)了事件堂湖，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間籍凝。
（常見實(shí)例：在前端開發(fā)的過程中，我們經(jīng)常會(huì)需要綁定一些持續(xù)觸發(fā)的事件苗缩，如 resize饵蒂、scroll、mousemove 等等酱讶，但有些時(shí)候我們并不希望在事件持續(xù)觸發(fā)的過程中那么頻繁地去執(zhí)行函數(shù)退盯。）
函數(shù)防抖
函數(shù)防抖（debounce）：當(dāng)持續(xù)觸發(fā)事件時(shí)，一定時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次渊迁，如果設(shè)定的時(shí)間到來之前慰照，又一次觸發(fā)了事件，就重新開始延時(shí)琉朽。如下圖毒租，持續(xù)觸發(fā)scroll事件時(shí)，并不執(zhí)行handle函數(shù)箱叁，當(dāng)1000毫秒內(nèi)沒有觸發(fā)scroll事件時(shí)墅垮，才會(huì)延時(shí)觸發(fā)scroll事件。
防抖debounce代碼：
// 防抖
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 處理函數(shù)
function handle() {
console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener('scroll', debounce(handle, 1000));
當(dāng)持續(xù)觸發(fā)scroll事件時(shí)耕漱，事件處理函數(shù)handle只在停止?jié)L動(dòng)1000毫秒之后才會(huì)調(diào)用一次算色，也就是說在持續(xù)觸發(fā)scroll事件的過程中，事件處理函數(shù)handle一直沒有執(zhí)行螟够。
函數(shù)節(jié)流
函數(shù)節(jié)流（throttle）：當(dāng)持續(xù)觸發(fā)事件時(shí)灾梦，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。節(jié)流通俗解釋就比如我們水龍頭放水妓笙，閥門一打開若河，水嘩嘩的往下流，秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德寞宫，我們要把水龍頭關(guān)小點(diǎn)牡肉，最好是如我們心意按照一定規(guī)律在某個(gè)時(shí)間間隔內(nèi)一滴一滴的往下滴。如下圖淆九，持續(xù)觸發(fā)scroll事件時(shí)，并不立即執(zhí)行handle函數(shù)毛俏，每隔1000毫秒才會(huì)執(zhí)行一次handle函數(shù)炭庙。
函數(shù)節(jié)流主要有兩種實(shí)現(xiàn)方法：時(shí)間戳和定時(shí)器。接下來分別用兩種方法實(shí)現(xiàn)throttle~
節(jié)流throttle代碼（時(shí)間戳）：
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
當(dāng)高頻事件觸發(fā)時(shí)煌寇，第一次會(huì)立即執(zhí)行（給scroll事件綁定函數(shù)與真正觸發(fā)事件的間隔一般大于delay焕蹄，如果你非要在網(wǎng)頁加載1000毫秒以內(nèi)就去滾動(dòng)網(wǎng)頁的話，我也沒辦法o(╥﹏╥)o）阀溶，而后再怎么頻繁地觸發(fā)事件腻脏，也都是每delay時(shí)間才執(zhí)行一次。而當(dāng)最后一次事件觸發(fā)完畢后银锻，事件也不會(huì)再被執(zhí)行了 （最后一次觸發(fā)事件與倒數(shù)第二次觸發(fā)事件的間隔小于delay永品，為什么小于呢？因?yàn)榇笥诰筒唤懈哳l了呀(?▽?)）击纬。
節(jié)流throttle代碼（定時(shí)器）：
// 節(jié)流throttle代碼（定時(shí)器）：
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
當(dāng)觸發(fā)事件的時(shí)候鼎姐，我們?cè)O(shè)置一個(gè)定時(shí)器，再次觸發(fā)事件的時(shí)候，如果定時(shí)器存在炕桨，就不執(zhí)行饭尝，直到delay時(shí)間后，定時(shí)器執(zhí)行執(zhí)行函數(shù)献宫，并且清空定時(shí)器钥平，這樣就可以設(shè)置下個(gè)定時(shí)器。當(dāng)?shù)谝淮斡|發(fā)事件時(shí)姊途，不會(huì)立即執(zhí)行函數(shù)涉瘾，而是在delay秒后才執(zhí)行。而后再怎么頻繁觸發(fā)事件吭净，也都是每delay時(shí)間才執(zhí)行一次睡汹。當(dāng)最后一次停止觸發(fā)后，由于定時(shí)器的delay延遲寂殉，可能還會(huì)執(zhí)行一次函數(shù)囚巴。
節(jié)流中用時(shí)間戳或定時(shí)器都是可以的。更精確地友扰，可以用時(shí)間戳+定時(shí)器彤叉，當(dāng)?shù)谝淮斡|發(fā)事件時(shí)馬上執(zhí)行事件處理函數(shù)，最后一次觸發(fā)事件后也還會(huì)執(zhí)行一次事件處理函數(shù)村怪。
節(jié)流throttle代碼（時(shí)間戳+定時(shí)器）：
// 節(jié)流throttle代碼（時(shí)間戳+定時(shí)器）：
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
在節(jié)流函數(shù)內(nèi)部使用開始時(shí)間startTime秽浇、當(dāng)前時(shí)間curTime與delay來計(jì)算剩余時(shí)間remaining，當(dāng)remaining<=0時(shí)表示該執(zhí)行事件處理函數(shù)了（保證了第一次觸發(fā)事件就能立即執(zhí)行事件處理函數(shù)和每隔delay時(shí)間執(zhí)行一次事件處理函數(shù)）甚负。如果還沒到時(shí)間的話就設(shè)定在remaining時(shí)間后再觸發(fā) （保證了最后一次觸發(fā)事件后還能再執(zhí)行一次事件處理函數(shù)）柬焕。當(dāng)然在remaining這段時(shí)間中如果又一次觸發(fā)事件，那么會(huì)取消當(dāng)前的計(jì)時(shí)器梭域，并重新計(jì)算一個(gè)remaining來判斷當(dāng)前狀態(tài)斑举。
總結(jié)
函數(shù)防抖：將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個(gè)計(jì)時(shí)器病涨，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)富玷，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置既穆。這樣一來赎懦，只有最后一次操作能被觸發(fā)。
函數(shù)節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)幻工。原理是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)励两。
區(qū)別： 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)囊颅，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)伐蒋。 比如在頁面的無限加載場景下工三，我們需要用戶在滾動(dòng)頁面時(shí)，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求先鱼，而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù)俭正。這樣的場景，就適合用節(jié)流技術(shù)來實(shí)現(xiàn)焙畔。
