关于防抖和节流的区别和实现

对于“防抖”和“节流”，之前以为这两个词是一个概念，翻了几篇文章特此写笔记整理一下。

防抖和节流的区别

防抖是...

我理解的防抖是，在事件被连续触发时，不进行处理，当事件不再被触发时，等待x秒后处理回调。如下图:

滚动的时候不会触发回调，而当滚动停止时，等待x秒，会打印“a”。

debounce.gif

而节流..

我理解的节流是，在事件被连续触发时，按照某种频率（每x秒执行一次）处理回调，如下图：

可见打印的频率不会随着滚动的速率的改变而改变，会按照指定的频率而触发回调。

throttle.gif

乞丐版实现

const container = document.getElementById('container')

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

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

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

推荐两篇文章

1. 说说 JavaScript 中函数的防抖 (Debounce) 与节流 (Throttle)
2. [译] Throttle 和 Debounce 在 React 中的应用