디바운스(debounce), 스로틀(throttle)

자바스크립트에서 특정 이벤트가 빈번하게 발생할 때, 이벤트 핸들러가 과도하게 호출되지 않도록 제어하는 두 가지 중요한 기술, 성능을 최적화하고, 불필요한 연산을 줄일 수 있다.

디바운스(debounce)

마지막으로 발생한 이벤트 이후 일정 시간 동안 추가 이벤트가 발생하지 않을 때만 이벤트 핸들러가 실행되도록 한다. 만약 디바운스 시간이 지나기 전에 새로운 이벤트가 발생하면 타이머를 리셋한다.

예 : 사용자가 입력 필드에 타이핑할 때, 마지막 입력 후 일정 시간 동안 사용자가 입력을 멈추면 서버에 요청을 보내는 경우

흔히 검색창에서 입력하다보면 하단에 연관 검색어 목록

function debounce(func, delay) {
	let timer;
	return function(...args) {
		clearTimeout(timer);
		timer = setTimeout(() => {
			func.apply(this, args);
		}, delay);	
	};
}

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

window.addEventListener('resize', debounce(handleResize, 300));
// resize 이벤트가 300ms 동안 발생하지 않을때 'handleresize' 함수 실행

스로틀(Throttle)

일정 시간 간격으로 이벤트 핸들러가 실행되도록 한다. 이벤트가 빈번하게 발생하더라도 일정 시간 내에는 한 번만 이벤트 핸들러가 실행된다.

예 : 스크롤 이벤트가 발생할 때, 일정 시간 간격으로만 스크롤 위치를 업데이트하는 경우.

흔히 무한 스크롤 기능 구현

function throttle(func, limit){
	let lastFunc;
	let lastRan;
	return function (...args){
		if(!lastRan){
			func.apply(this, args);
			lastRan = Date.now();
		} else {
			clearTimeout(lastFunc);
			lastFunc = setTimeout(() => {
				if((Date.now() - lastRan) >= limit){
					func.apply(this, args);
					lastRan = Date.now();
				}	
			}, limit - (Date.now() - lastRan));
		}
	};
}

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

window.addEventListener('scroll', throttle(handleScroll, 300));
// scroll 이벤트가 발생하면 300ms 간격으로 'handleScroll'함수 실행 

디바운스 vs 스로틀

• 디바운스 : 이벤트가 끝난 후 일정 시간 동안 대기한 후에 한 번 실행 (주로 검색 입력, 창 크기 조정 등의 경우)
• 스로틀: 이벤트가 계속 발생하더라도 일정 시간 간격으로 실행 (주로 스크롤, 마우스 이동 등의 경우)

두 기법 모두 성능 최적화를 위해 매우 유용하며, 특정 상황에 맞게 적절히 선택하여 사용 가능