디바운싱은 주로 이벤트 기반의 시스템에서 고성능을 유지하기 위해 사용되는 기술입니다. 특정 이벤트나 액션이 짧은 기간 동안 많이 발생할 때, 이를 한 번의 액션으로 '압축'하는 것을 의미합니다.

디바운싱의 대표적인 예시는 사용자의 키 입력을 감지하는 상황입니다. 사용자가 키를 연속으로 빠르게 타이핑할 때, 각각의 키 입력마다 서버에 쿼리를 보내는 것은 비효율적입니다. 따라서 일정 시간동안 입력을 모아서 한 번에 처리하는 방법을 선택하게 되는데, 이것이 바로 디바운싱입니다.

디바운싱의 구현 원리

1. 이벤트가 발생하면 처리를 바로 실행하지 않고 일정 시간 대기합니다.
2. 그 사이에 동일한 이벤트가 다시 발생하면 대기 시간을 리셋하고 다시 대기합니다.
3. 일정 시간 동안 추가 이벤트가 발생하지 않으면 이벤트를 처리합니다.

function debounce(func, wait) {
	let timeout;

	return function executedFunction(...args) {
		const later = () => {
			clearTimeout(timeout);
			func(...args);
		};

		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
	}
}

// 사용 예시
const debouncedSave = debounce(() => console.log('Saving data'), 250);

document.querySelector('input').addEventListener('input', debouncedSave);