摘要：定時(shí)器調(diào)用頻率優(yōu)化把開啟定時(shí)器的邏輯放在可以大大減少定時(shí)器的數(shù)量。舉個(gè)例子，比如為，此時(shí)在某一個(gè)定時(shí)器的回調(diào)函數(shù)檢測到上一次觸法事件的為，而為，此時(shí)雖然要開啟下一次定時(shí)，但這個(gè)時(shí)候定時(shí)的時(shí)間為就可以了。

最近的面試中考到了debounce，函數(shù)防抖，筆試的時(shí)候答的不是特別好，下來好好研究了一下，從原理到優(yōu)化，再到開源工具庫lodash的實(shí)現(xiàn)源碼，梳理了一番，現(xiàn)整理如下。

先簡單介紹一下debounce，從最簡單的一個(gè)場景入手，當(dāng)用戶不斷點(diǎn)擊頁面，短時(shí)間內(nèi)頻繁的觸法點(diǎn)擊事件，只有在用戶觸法事件后的ns時(shí)間內(nèi)，沒有再觸法事件，真正的監(jiān)聽函數(shù)才會執(zhí)行，如果在這段時(shí)間內(nèi)再次觸法了事件，就需要重新計(jì)算這個(gè)ns。

debounce最主要的作用是把多個(gè)觸法事件的操作延遲到最后一次觸法執(zhí)行，在性能上做了一定的優(yōu)化。

如果不使用debounce，那就會每一次點(diǎn)擊都會觸法事件的回調(diào)函數(shù)，這有時(shí)候?qū)τ谛阅苁且环N巨大的浪費(fèi)（比如大量的增加dom元素）?；蛘弋?dāng)回調(diào)函數(shù)計(jì)算量很大的時(shí)候，甚至?xí)?dǎo)致阻塞。

window.addEventListener("click", function (event) {
  var p = document.createElement("p")
  p.innerHTML = "trigger"
  document.body.appendChild(p)
})

頻繁觸法
可以看出，每一次點(diǎn)擊都會觸法函數(shù)執(zhí)行。

window.addEventListener("click", debounce(function (event) {
    var p = document.createElement("p")
    p.innerHTML = "trigger"
    document.body.appendChild(p)
    return "aaaa"
}, 500))

debounce優(yōu)化
可以看出，只有在最后一次點(diǎn)擊的500ms后，真正的函數(shù)func才會觸法。

本篇文章的debounce實(shí)現(xiàn)主要參考了lodash庫，會從最基礎(chǔ)的實(shí)現(xiàn)開始，一步步完善它。
debounce的核心實(shí)現(xiàn)，就是要判斷每次觸法事件的時(shí)候，要不要執(zhí)行真正的func。

大體思路就是每次觸法事件都開啟一個(gè)延時(shí)的定時(shí)器，在定時(shí)器結(jié)束的時(shí)候?qū)Ρ扰c最后一次觸法事件時(shí)的時(shí)間差，如果時(shí)間差大于延遲的閾值，那么就執(zhí)行真正的func`。

大致的結(jié)構(gòu)如下

function debounce (func, wait) {
    var lastCallTime   // 最后一次觸法事件的時(shí)間
    var lastThis       // 作用域
    var lastArgs       // 參數(shù)
    var timerId        // 定時(shí)器對象
    wait = +wait || 0
    // 啟動定時(shí)器
    function startTimer (timerExpired, wait) {
        return setTimeout(timerExpired, wait)
    }
    
    // func函數(shù)執(zhí)行   
    function invokeFunc () {
    
    }
    
    // 調(diào)用func函數(shù)的判定條件 
    function shouldInvoke () {
    
    }
    
    //  定時(shí)器的回調(diào)函數(shù) 
    function timerExpired () {
        // 在這里判斷觸法事件的時(shí)間差
    }
    
    // 要返回的函數(shù)
    function debounced (...args) {
    
    }
    
    return debounced
}

這就是基本的debounce函數(shù)的構(gòu)成，下面邊解析，邊去一一填充這些函數(shù)，最后再對函數(shù)進(jìn)行一步步的優(yōu)化。

每一次觸法事件的時(shí)候都會進(jìn)入到這個(gè)函數(shù)，這個(gè)函數(shù)需要做這么幾個(gè)事情。

確定作用域和參數(shù)

更新觸法事件的時(shí)間，也就是lastCallTime

啟動定時(shí)器 timerId

function debounced (...args) {
    const time = Date.now()
    lastThis = this
    lastArgs = args
    lastCallTime = time
    timerId = startTimer(timerExpired, wait)
}

startTimer 就是啟動一個(gè)定時(shí)器，后續(xù)會有更多的拓展，所以封裝一個(gè)函數(shù)

function startTimer (timerExpired, wait) {
    return setTimeout(timerExpired, wait)
}

timerExpired 主要判斷是否執(zhí)行func

function timerExpired () {
    const time = Date.now()
    if (shouldInvoke(time)) {
        return invokeFunc()
    }
}

shouldInvoke判斷每次事件觸法的時(shí)間差，如果大于閾值，那么真正的func就會執(zhí)行

function shouldInvoke (time) {
    return lastCallTime !== undefined && (time - lastCallTime >= wait)
}

function invokeFunc () {
    timerId = undefined
    const args = lastArgs
    const thisArg = lastThis
    let result = func.apply(thisArg, args)
    lastArgs = lastThis = undefined
    return result
}

這樣，這個(gè)函數(shù)就寫完了。把每一步拆解開來，理解還是相對容易的，再總結(jié)一下。每一次觸法事件，都開啟一個(gè)定時(shí)器timerId，并且會更新觸法事件的最后時(shí)間lastCallTime，在定時(shí)器的回調(diào)函數(shù)里面，判斷回調(diào)函數(shù)的執(zhí)行時(shí)間與lastCallTime的時(shí)間差，如果大于閾值，說明延遲時(shí)間到了，func執(zhí)行，如果小于，就忽略。

雖然實(shí)現(xiàn)了基本的debounce，但在擴(kuò)展它的功能之前，看一看有沒有優(yōu)化的空間，每一次觸法事件都開啟一個(gè)定時(shí)器是不是太浪費(fèi)了。這里可不可以減少調(diào)用次數(shù)。

把開啟定時(shí)器的邏輯放在timerExpired可以大大減少定時(shí)器的數(shù)量。debounced開啟了第一次定時(shí)器后，debounced會忽略后面的定時(shí)器開啟，直到func執(zhí)行之后（timerId為undefined），而在timerExpired里面判斷如果func不滿足觸發(fā)條件，那么就開啟下一個(gè)定時(shí)器。

其實(shí)本質(zhì)就是確保上一個(gè)定時(shí)器的回調(diào)不會觸法func了，才會開啟下一個(gè)定時(shí)器。

優(yōu)化代碼如下

function timerExpired () {
    const time = Date.now()
    if (shouldInvoke(time)) {
        return invokeFunc()
    }
    timerId = startTimer(timerExpired, wait)
}

function debounced (...args) {
    const time = Date.now()
    lastThis = this
    lastArgs = args
    lastCallTime = time
    if (timerId === undefined) {
        timerId = startTimer(timerExpired, wait)
    }
}

timerExpired 中開啟的定時(shí)器

timerId = startTimer(timerExpired, wait)

延遲的時(shí)間是否一定為wait呢，這是不一定的。
舉個(gè)例子，比如wait為5，此時(shí)在某一個(gè)定時(shí)器的回調(diào)函數(shù)timerExpired檢測到上一次觸法事件的lastCallTime為100，而Date.now()為103，此時(shí)雖然103-100 = 3 < 5,要開啟下一次定時(shí)，但這個(gè)時(shí)候定時(shí)的時(shí)間為 5 - 3 = 2就可以了。這才是精確的時(shí)間。

所以我們需要把這個(gè)時(shí)間封裝成一個(gè)函數(shù)remainingWait

function remainingWait(time) {
    const timeSinceLastCall = time - lastCallTime
    const timeWaiting = wait - timeSinceLastCall
    return timeWaiting
}

function timerExpired () {
    const time = Date.now()
    if (shouldInvoke(time)) {
        return invokeFunc()
    }
    timerId = startTimer(timerExpired, remainingWait(time))
}

附上執(zhí)行的流程圖

這其實(shí)只是實(shí)現(xiàn)了一個(gè)basicDebounce，其實(shí)有的時(shí)候我們需要在頻繁觸法事件的開始立即執(zhí)行func，而忽略后面的觸法事件，這就需要加入?yún)?shù)控制，也就是lodash中的trailing和leading，甚至兩者同時(shí)存在，頭尾各執(zhí)行一次，還有就是throttle函數(shù)節(jié)流，保證在一段時(shí)間內(nèi)func至少執(zhí)行一次，這就是lodash中的maxWait參數(shù)。下一篇文章會完善這些功能，屆時(shí)，一個(gè)完整的debounce才是真正的實(shí)現(xiàn)了。