在進(jìn)行窗口的resize象对、scroll，輸入框內(nèi)容校驗(yàn)等操作時(shí)叶圃，如果事件處理函數(shù)調(diào)用的頻率無(wú)限制袄膏，會(huì)加重瀏覽器的負(fù)擔(dān)掺冠，導(dǎo)致用戶體驗(yàn)非常糟糕德崭。此時(shí)我們可以采用debounce（防抖）和throttle（節(jié)流）的方式來(lái)減少調(diào)用頻率眉厨，同時(shí)又不影響實(shí)際效果。
函數(shù)防抖
函數(shù)防抖（debounce）：當(dāng)持續(xù)觸發(fā)事件時(shí)鹿蜀，一定時(shí)間段內(nèi)沒(méi)有再觸發(fā)事件耻姥，事件處理函數(shù)才會(huì)執(zhí)行一次琐簇，如果設(shè)定的時(shí)間到來(lái)之前婉商，又一次觸發(fā)了事件丈秩，就重新開(kāi)始延時(shí)淳衙。如下圖饺著，持續(xù)觸發(fā)scroll事件時(shí)幼衰，并不執(zhí)行handle函數(shù)缀雳，當(dāng)1000毫秒內(nèi)沒(méi)有觸發(fā)scroll事件時(shí)，才會(huì)延時(shí)觸發(fā)scroll事件识椰。
[圖片上傳失敗...(image-adaed6-1528855442754)]
一起來(lái)實(shí)現(xiàn)個(gè)簡(jiǎn)單的debounce~
防抖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)用一次，也就是說(shuō)在持續(xù)觸發(fā)scroll事件的過(guò)程中坦辟，事件處理函數(shù)handle一直沒(méi)有執(zhí)行锉走。
函數(shù)節(jié)流
函數(shù)節(jié)流（throttle）：當(dāng)持續(xù)觸發(fā)事件時(shí)挪蹭，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)梁厉。節(jié)流通俗解釋就比如我們水龍頭放水踏兜，閥門(mén)一打開(kāi)碱妆，水嘩嘩的往下流肉盹，秉著勤儉節(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ù)秕豫。
[圖片上傳失敗...(image-356329-1528855442754)]
函數(shù)節(jié)流主要有兩種實(shí)現(xiàn)方法：時(shí)間戳和定時(shí)器。接下來(lái)分別用兩種方法實(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)頁(yè)加載1000毫秒以內(nèi)就去滾動(dòng)網(wǎng)頁(yè)的話侮穿，我也沒(méi)辦法o(╥﹏╥)o）亲茅，而后再怎么頻繁地觸發(fā)事件，也都是每delay時(shí)間才執(zhí)行一次。而當(dāng)最后一次事件觸發(fā)完畢后验残，事件也不會(huì)再被執(zhí)行了 （最后一次觸發(fā)事件與倒數(shù)第二次觸發(fā)事件的間隔小于delay，為什么小于呢？因?yàn)榇笥诰筒唤懈哳l了呀(?▽?)）氨鹏。
效果如下：
節(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í)器）：
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)部使用開(kāi)始時(shí)間startTime、當(dāng)前時(shí)間curTime與delay來(lái)計(jì)算剩余時(shí)間remaining虎忌，當(dāng)remaining<=0時(shí)表示該執(zhí)行事件處理函數(shù)了（保證了第一次觸發(fā)事件就能立即執(zhí)行事件處理函數(shù)和每隔delay時(shí)間執(zhí)行一次事件處理函數(shù)）泡徙。如果還沒(méi)到時(shí)間的話就設(shè)定在remaining時(shí)間后再觸發(fā) （保證了最后一次觸發(fā)事件后還能再執(zhí)行一次事件處理函數(shù)）。當(dāng)然在remaining這段時(shí)間中如果又一次觸發(fā)事件膜蠢，那么會(huì)取消當(dāng)前的計(jì)時(shí)器堪藐，并重新計(jì)算一個(gè)remaining來(lái)判斷當(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è)置苏章。這樣一來(lái)，只有最后一次操作能被觸發(fā)奏瞬。
函數(shù)節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。原理是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)泉孩。
**區(qū)別： **函數(shù)節(jié)流不管事件觸發(fā)有多頻繁硼端，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)寓搬。 比如在頁(yè)面的無(wú)限加載場(chǎng)景下珍昨，我們需要用戶在滾動(dòng)頁(yè)面時(shí)，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求句喷，而不是在用戶停下滾動(dòng)頁(yè)面操作時(shí)才去請(qǐng)求數(shù)據(jù)镣典。這樣的場(chǎng)景，就適合用節(jié)流技術(shù)來(lái)實(shí)現(xiàn)唾琼。
防抖
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));
節(jié)流
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));
