對(duì)于“防抖”和“節(jié)流”，之前以為這兩個(gè)詞是一個(gè)概念，翻了幾篇文章特此寫(xiě)筆記整理一下。

防抖和節(jié)流的區(qū)別

防抖是...

我理解的防抖是，在事件被連續(xù)觸發(fā)時(shí)，不進(jìn)行處理，當(dāng)事件不再被觸發(fā)時(shí)，等待x秒后處理回調(diào)。如下圖:

滾動(dòng)的時(shí)候不會(huì)觸發(fā)回調(diào)，而當(dāng)滾動(dòng)停止時(shí)，等待x秒，會(huì)打印“a”。

debounce.gif

而節(jié)流..

我理解的節(jié)流是，在事件被連續(xù)觸發(fā)時(shí)，按照某種頻率（每x秒執(zhí)行一次）處理回調(diào)，如下圖：

可見(jiàn)打印的頻率不會(huì)隨著滾動(dòng)的速率的改變而改變，會(huì)按照指定的頻率而觸發(fā)回調(diào)。

throttle.gif

乞丐版實(shí)現(xiàn)

const container = document.getElementById('container')

// 防抖
function debounce(func, time) {
    let timer;
    return () => {
        clearTimeout(timer)
        timer = setTimeout(() => {
            func()
        }, time);
    }
}

// 節(jié)流
function throttle(func, time) {
    let timer;
    return () => {
        if (!timer) {
            timer = setTimeout(() => {
                func()
                timer = null
            }, time)
        }
    }
}

container.addEventListener('scroll', debounce(() => { console.log('a') }, 1000))

推薦兩篇文章

1. 說(shuō)說(shuō) JavaScript 中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)
2. [譯] Throttle 和 Debounce 在 React 中的應(yīng)用