디바운스(Debounce)는 이벤트가 멈춘 후 일정 시간이 지나야 실행됩니다. 연속 이벤트 중에는 타이머가 계속 리셋됩니다. 검색 입력, 윈도우 리사이즈 완료 후 처리에 적합합니다. 쓰로틀(Throttle)은 일정 간격으로 최대 1회실행을 보장합니다. 스크롤 이벤트, 버튼 연타 방지에 적합합니다. 디바운스는 "마지막 이벤트 후", 쓰로틀은 "일정 간격마다" 실행됩니다.
01 · Concept
디바운스 / 쓰로틀
빈번한 이벤트 호출을 제어하여 성능을 최적화하는 두 가지 핵심 기법입니다.
디바운스는 이벤트가 멈춘 후 일정 시간이 지나야 실행되고, 쓰로틀은 일정 간격으로 최대 1회 실행을 보장합니다. 검색 입력, 스크롤 이벤트, 리사이즈 이벤트 등에서 불필요한 함수 호출을 줄여 성능 최적화에 활용됩니다.
02 · Interactive Demo
호출 횟수 비교 및 타임라인
이벤트 영역을 빠르게 클릭하여 원본, 디바운스, 쓰로틀의 호출 횟수 차이를 확인하세요.
이벤트 발생 영역 (빠르게 클릭하세요)
Raw
0
Debounce
0
Throttle
0
Timeline
Raw
Debounce
Throttle
03 · Code Example
코드 예시
실제 코드로 동작 원리를 확인하세요.
function debounce<T extends (...args: any[]) => any>(
fn: T,
delay: number
): (...args: Parameters<T>) => void {
let timer: ReturnType<typeof setTimeout>;
return function (...args: Parameters<T>) {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
}, delay);
};
}
// 사용 예
const handleSearch = debounce((query: string) => {
fetch(`/api/search?q=${query}`);
}, 300);
input.addEventListener("input", (e) => {
handleSearch(e.target.value);
});04 · Interview Point
면접 핵심 질문
핵심 원리:
setTimeout과 clearTimeout을 클로저로 관리합니다. 함수가 호출될 때마다 이전 타이머를 취소하고 새 타이머를 설정합니다. 지정된 delay 동안 추가 호출이 없으면 실제 함수가 실행됩니다. leading 옵션을 추가하면 첫 호출 시 즉시 실행하고, 이후 연속 호출을 무시할 수 있습니다.디바운스: 1. 검색 자동완성 (타이핑 멈춘 후 API 호출) 2. 윈도우 리사이즈 후 레이아웃 재계산 3. 폼 유효성 검사 (입력 완료 후 검증) 쓰로틀: 1. 무한 스크롤 (스크롤 위치 확인) 2.
mousemove 이벤트 처리 3. 버튼 연타 방지 (결제 버튼) 4. 게임에서 FPS 제한