前端面試系列-JavaScript-防抖與節(jié)流(用節(jié)流優(yōu)化防抖)

2021-3-25 前端達(dá)人

文章目錄

一.函數(shù)防抖

二、函數(shù)節(jié)流

1.時間戳實現(xiàn)

2.定時器實現(xiàn)

3.用節(jié)流優(yōu)化防抖(定時器+時間戳)

三、總結(jié)

四、例子

一.函數(shù)防抖

當(dāng)持續(xù)觸發(fā)事件時，并不執(zhí)行事件處理函數(shù)，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次；如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。

function debounce(fn, delay) {
// 定時器
let timer = null
// 將debounce處理結(jié)果當(dāng)作函數(shù)返回
return function () {
// 保留調(diào)用時的this上下文
let context = this
// 保留調(diào)用時傳入的參數(shù)
let args = arguments
// 每次事件被觸發(fā)時，都去清除之前的舊定時器
if(timer) {
clearTimeout(timer)
}
// 設(shè)立新定時器
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}

二、函數(shù)節(jié)流

當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。

1.時間戳實現(xiàn)

定時器實現(xiàn)

function throttle(fn, wait) {
let timeout;
return function() {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
fn.call(this, arguments)
}, wait)
}
}
}

3.用節(jié)流優(yōu)化防抖(定時器+時間戳)
防抖的問題在于如果用戶的操作十分頻繁——他每次都不等設(shè)置的 delay 時間結(jié)束就進(jìn)行下一次操作，于是每次都為該用戶重新生成定時器，回調(diào)函數(shù)被延遲了不計其數(shù)次。頻繁的延遲會導(dǎo)致用戶遲遲得不到響應(yīng)，用戶同樣會產(chǎn)生“這個頁面卡死了”的觀感。

用節(jié)流來優(yōu)化，保證在一定時間段內(nèi)會調(diào)用一次事件處理函數(shù)。

function throttle(fn, delay) {
// last為上一次觸發(fā)回調(diào)的時間, timer是定時器
let last = 0, timer = null
// 將throttle處理結(jié)果當(dāng)作函數(shù)返回

return function () {
// 保留調(diào)用時的this上下文
let context = this
// 保留調(diào)用時傳入的參數(shù)
let args = arguments
// 記錄本次觸發(fā)回調(diào)的時間
let now = +new Date()
// +是一元操作符，利用js隱式轉(zhuǎn)換將其他類型變?yōu)閿?shù)字類型

// 判斷上次觸發(fā)的時間和本次觸發(fā)的時間差是否小于時間間隔的閾值
if (now - last < delay) {
// 如果時間間隔小于我們設(shè)定的時間間隔閾值，則為本次觸發(fā)操作設(shè)立一個新的定時器
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, delay)
} else {
// 如果時間間隔超出了我們設(shè)定的時間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應(yīng)
last = now
fn.apply(context, args)
}
}
}

三、總結(jié)
函數(shù)防抖：將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個計時器，規(guī)定在delay時間后觸發(fā)函數(shù)，但是在delay時間內(nèi)再次觸發(fā)的話，就會取消之前的計時器而重新設(shè)置。這樣一來，只有最后一次操作能被觸發(fā)。
函數(shù)節(jié)流：使得一定時間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達(dá)一定時間來觸發(fā)函數(shù)。
區(qū)別：函數(shù)節(jié)流不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。
場景：比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發(fā)一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景，就適合用節(jié)流技術(shù)來實現(xiàn)。