定義及解讀

防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi)，無論觸發(fā)了多少次回調(diào)，都只執(zhí)行最后一次。假如我們設(shè)置了一個(gè)等待時(shí)間 3 秒的函數(shù)，在這 3 秒內(nèi)如果遇到函數(shù)調(diào)用請求就重新計(jì)時(shí) 3 秒，直至新的 3 秒內(nèi)沒有函數(shù)調(diào)用請求，此時(shí)執(zhí)行函數(shù)，不然就以此類推重新計(jì)時(shí)。

舉一個(gè)小例子：假定在做公交車時(shí)，司機(jī)需等待最后一個(gè)人進(jìn)入后再關(guān)門，每次新進(jìn)一個(gè)人，司機(jī)就會(huì)把計(jì)時(shí)器清零并重新開始計(jì)時(shí)，重新等待 1 分鐘再關(guān)門，如果后續(xù) 1 分鐘內(nèi)都沒有乘客上車，司機(jī)會(huì)認(rèn)為乘客都上來了，將關(guān)門發(fā)車。

此時(shí)「上車的乘客」就是我們頻繁操作事件而不斷涌入的回調(diào)任務(wù)；「1 分鐘」就是計(jì)時(shí)器，它是司機(jī)決定「關(guān)門」的依據(jù)，如果有新的「乘客」上車，將清零并重新計(jì)時(shí)；「關(guān)門」就是最后需要執(zhí)行的函數(shù)。

如果你還無法理解，看下面這張圖就清晰多了，另外點(diǎn)擊 這個(gè)頁面 查看節(jié)流和防抖的可視化比較。其中 Regular 是不做任何處理的情況，throttle 是函數(shù)節(jié)流之后的結(jié)果（上一小節(jié)已介紹），debounce 是函數(shù)防抖之后的結(jié)果。

原理及實(shí)現(xiàn)

實(shí)現(xiàn)原理就是利用定時(shí)器，函數(shù)第一次執(zhí)行時(shí)設(shè)定一個(gè)定時(shí)器，之后調(diào)用時(shí)發(fā)現(xiàn)已經(jīng)設(shè)定過定時(shí)器就清空之前的定時(shí)器，并重新設(shè)定一個(gè)新的定時(shí)器，如果存在沒有被清空的定時(shí)器，當(dāng)定時(shí)器計(jì)時(shí)結(jié)束后觸發(fā)函數(shù)執(zhí)行。

實(shí)現(xiàn) 1

// 實(shí)現(xiàn) 1
// fn 是需要防抖處理的函數(shù)
// wait 是時(shí)間間隔
function debounce(fn, wait = 50) {
// 通過閉包緩存一個(gè)定時(shí)器 id
let timer = null
// 將 debounce 處理結(jié)果當(dāng)作函數(shù)返回
// 觸發(fā)事件回調(diào)時(shí)執(zhí)行這個(gè)返回函數(shù)
return function(...args) {
// 如果已經(jīng)設(shè)定過定時(shí)器就清空上一次的定時(shí)器
if (timer) clearTimeout(timer)
// 開始設(shè)定一個(gè)新的定時(shí)器，定時(shí)器結(jié)束后執(zhí)行傳入的函數(shù) fn
timer = setTimeout(() => {
fn.apply(this, args)
}, wait)
}
}
// DEMO
// 執(zhí)行 debounce 函數(shù)返回新函數(shù)
const betterFn = debounce(() => console.log('fn 防抖執(zhí)行了'), 1000)
// 停止滑動(dòng) 1 秒后執(zhí)行函數(shù) () => console.log('fn 防抖執(zhí)行了')
document.addEventListener('scroll', betterFn)

實(shí)現(xiàn) 2

上述實(shí)現(xiàn)方案已經(jīng)可以解決大部分使用場景了，不過想要實(shí)現(xiàn)第一次觸發(fā)回調(diào)事件就執(zhí)行 fn 有點(diǎn)力不從心了，這時(shí)候我們來改寫下 debounce 函數(shù)，加上第一次觸發(fā)立即執(zhí)行的功能。

// 實(shí)現(xiàn) 2
// immediate 表示第一次是否立即執(zhí)行
function debounce(fn, wait = 50, immediate) {
let timer = null
return function(...args) {
if (timer) clearTimeout(timer)
// ------ 新增部分 start ------ 
// immediate 為 true 表示第一次觸發(fā)后執(zhí)行
// timer 為空表示首次觸發(fā)
if (immediate && !timer) {
fn.apply(this, args)
}
// ------ 新增部分 end ------ 
timer = setTimeout(() => {
fn.apply(this, args)
}, wait)
}
}
// DEMO
// 執(zhí)行 debounce 函數(shù)返回新函數(shù)
const betterFn = debounce(() => console.log('fn 防抖執(zhí)行了'), 1000, true)
// 第一次觸發(fā) scroll 執(zhí)行一次 fn，后續(xù)只有在停止滑動(dòng) 1 秒后才執(zhí)行函數(shù) fn
document.addEventListener('scroll', betterFn)

實(shí)現(xiàn)原理比較簡單，判斷傳入的 immediate 是否為 true，另外需要額外判斷是否是第一次執(zhí)行防抖函數(shù)，判斷依舊就是 timer 是否為空，所以只要 immediate && !timer 返回 true 就執(zhí)行 fn 函數(shù)，即 fn.apply(this, args)。

加強(qiáng)版 throttle

現(xiàn)在考慮一種情況，如果用戶的操作非常頻繁，不等設(shè)置的延遲時(shí)間結(jié)束就進(jìn)行下次操作，會(huì)頻繁的清除計(jì)時(shí)器并重新生成，所以函數(shù) fn 一直都沒辦法執(zhí)行，導(dǎo)致用戶操作遲遲得不到響應(yīng)。

有一種思想是將「節(jié)流」和「防抖」合二為一，變成加強(qiáng)版的節(jié)流函數(shù)，關(guān)鍵點(diǎn)在于「 wait 時(shí)間內(nèi)，可以重新生成定時(shí)器，但只要 wait 的時(shí)間到了，必須給用戶一個(gè)響應(yīng)」。這種合體思路恰好可以解決上面提出的問題。

給出合二為一的代碼之前先來回顧下 throttle 函數(shù)，上一小節(jié)中有詳細(xì)的介紹。

// fn 是需要執(zhí)行的函數(shù)
// wait 是時(shí)間間隔
const throttle = (fn, wait = 50) => {
// 上一次執(zhí)行 fn 的時(shí)間
let previous = 0
// 將 throttle 處理結(jié)果當(dāng)作函數(shù)返回
return function(...args) {
// 獲取當(dāng)前時(shí)間，轉(zhuǎn)換成時(shí)間戳，單位毫秒
let now = +new Date()
// 將當(dāng)前時(shí)間和上一次執(zhí)行函數(shù)的時(shí)間進(jìn)行對(duì)比
// 大于等待時(shí)間就把 previous 設(shè)置為當(dāng)前時(shí)間并執(zhí)行函數(shù) fn
if (now - previous > wait) {
previous = now
fn.apply(this, args)
}
}
}

結(jié)合 throttle 和 debounce 代碼，加強(qiáng)版節(jié)流函數(shù) throttle 如下，新增邏輯在于當(dāng)前觸發(fā)時(shí)間和上次觸發(fā)的時(shí)間差小于時(shí)間間隔時(shí)，設(shè)立一個(gè)新的定時(shí)器，相當(dāng)于把 debounce 代碼放在了小于時(shí)間間隔部分。

// fn 是需要節(jié)流處理的函數(shù)
// wait 是時(shí)間間隔
function throttle(fn, wait) {
// previous 是上一次執(zhí)行 fn 的時(shí)間
// timer 是定時(shí)器
let previous = 0, timer = null
// 將 throttle 處理結(jié)果當(dāng)作函數(shù)返回
return function (...args) {
// 獲取當(dāng)前時(shí)間，轉(zhuǎn)換成時(shí)間戳，單位毫秒
let now = +new Date()
// ------ 新增部分 start ------ 
// 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔
if (now - previous < wait) {
// 如果小于，則為本次觸發(fā)操作設(shè)立一個(gè)新的定時(shí)器
// 定時(shí)器時(shí)間結(jié)束后執(zhí)行函數(shù) fn 
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
previous = now
fn.apply(this, args)
}, wait)
// ------ 新增部分 end ------ 
} else {
// 第一次執(zhí)行
// 或者時(shí)間間隔超出了設(shè)定的時(shí)間間隔，執(zhí)行函數(shù) fn
previous = now
fn.apply(this, args)
}
}
}
// DEMO
// 執(zhí)行 throttle 函數(shù)返回新函數(shù)
const betterFn = throttle(() => console.log('fn 節(jié)流執(zhí)行了'), 1000)
// 第一次觸發(fā) scroll 執(zhí)行一次 fn，每隔 1 秒后執(zhí)行一次函數(shù) fn，停止滑動(dòng) 1 秒后再執(zhí)行函數(shù) fn
document.addEventListener('scroll', betterFn)

看完整段代碼會(huì)發(fā)現(xiàn)這個(gè)思想和上篇文章介紹的 underscore 中 throttle 的實(shí)現(xiàn)思想非常相似。

underscore 源碼解析

看完了上文的基本版代碼，感覺還是比較輕松的，現(xiàn)在來學(xué)習(xí)下 underscore 是如何實(shí)現(xiàn) debounce 函數(shù)的，學(xué)習(xí)一下優(yōu)秀的思想，直接上代碼和注釋，本源碼解析依賴于 underscore 1.9.1 版本實(shí)現(xiàn)。

// 此處的三個(gè)參數(shù)上文都有解釋
_.debounce = function(func, wait, immediate) {
// timeout 表示定時(shí)器
// result 表示 func 執(zhí)行返回值
var timeout, result;
// 定時(shí)器計(jì)時(shí)結(jié)束后
// 1、清空計(jì)時(shí)器，使之不影響下次連續(xù)事件的觸發(fā)
// 2、觸發(fā)執(zhí)行 func
var later = function(context, args) {
timeout = null;
// if (args) 判斷是為了過濾立即觸發(fā)的
// 關(guān)聯(lián)在于 _.delay 和 restArguments
if (args) result = func.apply(context, args);
};
// 將 debounce 處理結(jié)果當(dāng)作函數(shù)返回
var debounced = restArguments(function(args) {
if (timeout) clearTimeout(timeout);
if (immediate) {
// 第一次觸發(fā)后會(huì)設(shè)置 timeout，
// 根據(jù) timeout 是否為空可以判斷是否是首次觸發(fā)
var callNow = !timeout;
timeout = setTimeout(later, wait);
if (callNow) result = func.apply(this, args);
} else {
// 設(shè)置定時(shí)器
timeout = _.delay(later, wait, this, args);
}
return result;
});
// 新增 手動(dòng)取消
debounced.cancel = function() {
clearTimeout(timeout);
timeout = null;
};
return debounced;
};
// 根據(jù)給定的毫秒 wait 延遲執(zhí)行函數(shù) func
_.delay = restArguments(function(func, wait, args) {
return setTimeout(function() {
return func.apply(null, args);
}, wait);
});

相比上文的基本版實(shí)現(xiàn)，underscore 多了以下幾點(diǎn)功能。

1、函數(shù) func 的執(zhí)行結(jié)束后返回結(jié)果值 result

2、定時(shí)器計(jì)時(shí)結(jié)束后清除 timeout，使之不影響下次連續(xù)事件的觸發(fā)

3、新增了手動(dòng)取消功能 cancel

4、immediate 為 true 后只會(huì)在第一次觸發(fā)時(shí)執(zhí)行，頻繁觸發(fā)回調(diào)結(jié)束后不會(huì)再執(zhí)行

小結(jié)

• 函數(shù)節(jié)流和防抖都是「閉包」、「高階函數(shù)」的應(yīng)用
• 函數(shù)節(jié)流 throttle 指的是某個(gè)函數(shù)在一定時(shí)間間隔內(nèi)（例如 3 秒）執(zhí)行一次，在這 3 秒內(nèi) 無視后來產(chǎn)生的函數(shù)調(diào)用請求
  • 節(jié)流可以理解為養(yǎng)金魚時(shí)擰緊水龍頭放水，3 秒一滴
    • 「管道中的水」就是我們頻繁操作事件而不斷涌入的回調(diào)任務(wù)，它需要接受「水龍頭」安排
    • 「水龍頭」就是節(jié)流閥，控制水的流速，過濾無效的回調(diào)任務(wù)
    • 「滴水」就是每隔一段時(shí)間執(zhí)行一次函數(shù)
    • 「3 秒」就是間隔時(shí)間，它是「水龍頭」決定「滴水」的依據(jù)
  • 應(yīng)用：監(jiān)聽滾動(dòng)事件添加節(jié)流函數(shù)后，每隔固定的一段時(shí)間執(zhí)行一次
  • 實(shí)現(xiàn)方案 1：用時(shí)間戳來判斷是否已到執(zhí)行時(shí)間，記錄上次執(zhí)行的時(shí)間戳，然后每次觸發(fā)后執(zhí)行回調(diào)，判斷當(dāng)前時(shí)間距離上次執(zhí)行時(shí)間的間隔是否已經(jīng)達(dá)到時(shí)間差（Xms） ，如果是則執(zhí)行，并更新上次執(zhí)行的時(shí)間戳，如此循環(huán)
  • 實(shí)現(xiàn)方案 2：使用定時(shí)器，比如當(dāng) scroll 事件剛觸發(fā)時(shí)，打印一個(gè) hello world，然后設(shè)置個(gè) 1000ms 的定時(shí)器，此后每次觸發(fā) scroll 事件觸發(fā)回調(diào)，如果已經(jīng)存在定時(shí)器，則回調(diào)不執(zhí)行方法，直到定時(shí)器觸發(fā)，handler 被清除，然后重新設(shè)置定時(shí)器
• 函數(shù)防抖 debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi)，無論觸發(fā)了多少次回調(diào)，都只執(zhí)行最后一次
  • 防抖可以理解為司機(jī)等待最后一個(gè)人進(jìn)入后再關(guān)門，每次新進(jìn)一個(gè)人，司機(jī)就會(huì)把計(jì)時(shí)器清零并重新開始計(jì)時(shí)
    • 「上車的乘客」就是我們頻繁操作事件而不斷涌入的回調(diào)任務(wù)
    • 「1 分鐘」就是計(jì)時(shí)器，它是司機(jī)決定「關(guān)門」的依據(jù)，如果有新的「乘客」上車，將清零并重新計(jì)時(shí)
    • 「關(guān)門」就是最后需要執(zhí)行的函數(shù)
  • 應(yīng)用：input 輸入回調(diào)事件添加防抖函數(shù)后，只會(huì)在停止輸入后觸發(fā)一次
  • 實(shí)現(xiàn)方案：使用定時(shí)器，函數(shù)第一次執(zhí)行時(shí)設(shè)定一個(gè)定時(shí)器，之后調(diào)用時(shí)發(fā)現(xiàn)已經(jīng)設(shè)定過定時(shí)器就清空之前的定時(shí)器，并重新設(shè)定一個(gè)新的定時(shí)器，如果存在沒有被清空的定時(shí)器，當(dāng)定時(shí)器計(jì)時(shí)結(jié)束后觸發(fā)函數(shù)執(zhí)行

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論