對于“防抖”和“節流”，之前以為這兩個詞是一個概念，翻了幾篇文章特此寫筆記整理一下。
防抖和節流的區別
防抖是...
我理解的防抖是，在事件被連續觸發時，不進行處理，當事件不再被觸發時，等待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))
