[ JavaScript / TypeScript ] Debounce 함수 구현

Debounce는 일정 시간 동안 이벤트가 발생하지 않았을 때 함수를 호출한다. 예시로

window.addEventListener('resize', function(){
    console.log('hello');
});

 위의 resize 이벤트가 발생할 때마다 "hello"가 콘솔에 찍힌다고 하면 뷰포트의 크기를 조절할 때 엄청 많은 양의 콘솔이 찍히게 된다. resize 이벤트마다 코드를 실행해야 하는 경우가 있겠지만, 그렇지 않은 경우라면 매우 비효율적이다. 꼭 필요한 경우가 아니라면 Debounce를 사용해서 적절하게 함수 호출 횟수를 조절하는 게 좋다. 

 

 debounce 함수의 주어진 매개변수를 보면 콜백 함수(func), 지연 시간(wait)을 가지고 있다. debounce 함수 내부에서 클로저를 리턴해준다. setTimeout()은 타이머 ID를 반환해 주며 해당 클로저의 상위 스코프에 있는 id에 값을 저장해 준다. wait보다 빠른 시간에 함수가 재호출 되면 id변수에 저장된 타이머 ID로 이전에 등록된 타이머를 취소해 준다.

function debounce(func: () => void, wait: number) {
	let id: number | undefined;
	return function () {
		clearTimeout(id);
		id = window.setTimeout(func, wait);
	};
}
export default debounce;

 

해당 함수를 사용하기 위해서 꼭 구현을 해야 하는 건 아니다

https://www.npmjs.com/package/debounce

debounce

https://www.npmjs.com/package/lodash

lodash

그래도 이 함수는 구현이 간단하기 때문에, 외부 라이브러리에 의존하지 않고 직접 구현을 해보면 좋을 거 같다. 의존성은 무조건 최소화하는 것이 좋기 때문에 해당 유틸리티 말고도 프로젝트를 진행하면서 가능한 모든 부분은 직접 구현을 해야겠다.