Debounce와 Throttle의 차이점

Debounce

Debounce는 여러 번 호출되는 함수를 그룹화해서 지정한 시간이 지난 후 마지막 또는 처음에 한 번만 호출 하도록 한다.

간단 구현

자동완성 기능을 예로 들어 보자. (실무 코드가 아님)

const autoCompleteLogic = () => {
		console.log('called autoCompleteLogic');
}

let timer;
const $input = document.querySelector('#auto-complete-input');
$input.addEventListener('input', (e) => {
		if (timer) {
				clearTimeout(timer);
		}

		timer = setTimeout(() => {
				autoCompleteLogic();
		}, 300);
});

입력이 발생할 때마다 setTimeout으로 타이머가 생성되며, 지정한 시간(300ms) 내에 새로운 입력이 발생하면 기존 타이머를 클리어하고 새로운 타이머를 생성한다.

따라서 지정한 시간 내에 새로운 입력이 없을 때, 지정한 시간이 지나고 autoCompleteLogic을 호출한다.

Throttle

Throttle은 여러 번 호출되는 함수를 지정한 주기에 한 번씩 호출 되도록 한다.

간단 구현

Infinite Scroll 기능을 예로 들어보자. (실무 코드가 아님)

const fetchNewFeed = () => {
		console.log('fetchNewFeed');
}

let timer;
const $scroller = document.querySelector('#scroller');
$scroller.addEventListener('scroll', (e) => {
		if (!timer) {
			timer = setTimeout(() => {
					timer = null;
					fetchNewFeed();
			}, 300);
		}
});

스크롤이 발생할 때마다 타이머 유무를 체크하고, 타이머가 없으면 지정한 시간(300ms) 이후에 fetchNewFeed를 한 번 호출한다. 따라서, 스크롤 이벤트가 여러번 발생하더라도, 지정한 시간을 주기로 한번씩만 호출된다.

정리

Debounce는 여러 번 호출되는 함수 중 제일 처음이나 마지막 함수만 호출되도록 함.

Throttle은 여러 번 호출되는 함수를 일정한 주기마다 한 번씩만 호출되도록 함.

lodash 를 이용해서 좀 더 편리하게 구현할 수 있음.