相信對(duì)很多在千鋒長沙IT培訓(xùn)的小伙伴來說面試是個(gè)不小的問題，但是千鋒長沙的老師們都有給大家準(zhǔn)備長沙IT培訓(xùn)程序員面試題，下面給大家說一下函數(shù)防抖節(jié)流：

        在進(jìn)行窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無限制，會(huì)加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。此時(shí)我們可以采用debounce（防抖）和throttle（節(jié)流）的方式來減少調(diào)用頻率，同時(shí)又不影響實(shí)際效果。

        舉例：工作中的話像我們有的項(xiàng)目中會(huì)有頁面懶加載、下拉刷新等效果。那么問題來了~ 在用戶網(wǎng)慢或者手機(jī)卡頓的時(shí)候，怎樣阻止客戶重復(fù)請(qǐng)求數(shù)據(jù)呢？這時(shí)候就需要我們的防抖和節(jié)流...

        先簡單說下什么是防抖和節(jié)流：

        函數(shù)防抖（debounce）：當(dāng)持續(xù)觸發(fā)事件時(shí)，一定時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來之前，又一次觸發(fā)了事件，就重新開始延時(shí)。簡單來說防抖就是：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。

防抖函數(shù)分為非立即執(zhí)行版和立即執(zhí)行版。
underscorejs.org js類庫（提供很多項(xiàng)目中）

代碼實(shí)現(xiàn)：

/*
*
* 函數(shù)的防抖（debounce）：不是某個(gè)事件觸發(fā)就去執(zhí)行函數(shù)，而是在指定的時(shí)間間隔內(nèi)，
* 執(zhí)行一次，減少函數(shù)執(zhí)行的次數(shù)
* */

/*
* debounce：函數(shù)防抖
* @params
* func：要執(zhí)行的函數(shù)
* wait：間隔等待時(shí)間
* immediate：在開始邊界還是結(jié)束邊界觸發(fā)執(zhí)行(true=>開始邊界)
* @return
* 可被調(diào)用的函數(shù)
* */
function debounce(func, wait, immediate) {
let result = null,
timeout = null;
return function (...args) {
let context = this,
now = immediate && !timeout;
clearTimeout(timeout); //=> 重要：在設(shè)置新的定時(shí)器之前，我們要把之前設(shè)置的定時(shí)器都干掉，因?yàn)榉蓝?br /> 的目的是等待時(shí)間內(nèi)，只執(zhí)行一次
timeout = setTimeout(() => {
timeout = null;
if (!immediate) result = func.call(context, ...args);
}, wait);
if (now) result = func.call(context, ...args);
return result;
}
}

        復(fù)制代碼函數(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)一滴一滴的往下滴。

        所謂節(jié)流就是：指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù)。 節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率。對(duì)于節(jié)流，一般有兩種方式可以實(shí)現(xiàn)，分別是時(shí)間戳版和定時(shí)器版。代碼實(shí)現(xiàn)：

/*
* 函數(shù)的節(jié)流（throttle）：為了縮減執(zhí)行的頻率，但不像防抖一樣，一定時(shí)間內(nèi)只能執(zhí)行一次，
* 而是一定時(shí)間內(nèi)能執(zhí)行多次
*
**/

/*
* throttle：函數(shù)節(jié)流是為了縮減執(zhí)行頻率，當(dāng)達(dá)到了一定的時(shí)間間隔就會(huì)執(zhí)行一次
* @params
* func：需要執(zhí)行的函數(shù)
* wait：設(shè)置的間隔時(shí)間
* @return
* 返回可被調(diào)用的函數(shù)
* */
let throttle = function (func, wait) {
let timeout = null,
result = null;
previous = 0; //=> 上次執(zhí)行的時(shí)間點(diǎn)
return function (...args) {
let now = new Date,
context = this;
//=> remaining小于等于0，表示上次執(zhí)行至此所間隔時(shí)間已經(jīng)超過一個(gè)時(shí)間間隔
let remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
previous = now;
timeout = null;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date;
timeout = null;
result = func.apply(context, args);
}, remaining);
}
return result;
};

};

        復(fù)制代碼區(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)。

        本套學(xué)習(xí)內(nèi)容由千鋒長沙IT培訓(xùn)班韋老師撰寫，版權(quán)歸千鋒教育學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

上一篇

長沙前端培訓(xùn)班拼多多和快手前端面試題分享

下一篇

長沙IT培訓(xùn)程序員面試題：Object函數(shù)