연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
let debounceTimer;
window.addEventListener('resize', (e) => {
if (debounceTimer) clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
console.log('[resize]', e);
}, 3000);
});
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
let throttleTimer;
window.addEventListener('resize', (e) => {
if (!throttleTimer) {
throttleTimer = setTimeout(() => {
throttleTimer = null;
console.log('[resize]', e);
}, 3000);
}
});
디바운싱과 스로틀의 가장 큰 차이점은 스로틀은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것입니다.
Debounce 는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법입니다.
모던 자바스크립트 Deep Dive
디바운스, 쓰로틀
디바운스, 쓰로틀 차이점