디바운싱과 스로틀링의 차이점은 무엇이며, 언제 사용해야 하나요?

디바운싱과 스로틀링은 짧은 시간에 너무 자주 발생하는 이벤트(스크롤·입력·리사이즈 등)의 핸들러 실행 횟수를 줄여 성능을 지키는 기법입니다. 둘 다 클로저로 타이머를 기억해 구현합니다.

디바운싱 (debouncing)

연속된 호출에서 마지막 호출만 실행합니다. 이벤트가 멈추고 일정 시간이 지나야 실행되며, 그 전에 다시 호출되면 타이머가 초기화됩니다. “입력이 끝나길 기다렸다가 한 번”이 핵심입니다.

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
 
// 입력이 멈춘 뒤 300ms 후 한 번만 검색
input.addEventListener('input', debounce(search, 300));

적용 사례: 검색어 자동완성, 입력 폼 유효성 검사, 창 리사이즈 완료 후 재계산처럼 “최종 상태”만 중요한 경우.

스로틀링 (throttling)

연속된 호출에서 일정 간격마다 한 번씩 실행합니다. 이벤트가 계속 발생해도 정해진 주기로 실행을 보장합니다. “쏟아져도 일정 박자로”가 핵심입니다.

function throttle(fn, interval) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}
 
// 스크롤 중 200ms마다 한 번씩 위치 계산
window.addEventListener('scroll', throttle(onScroll, 200));

적용 사례: 스크롤 위치 추적, 무한 스크롤, 마우스 이동, 일정 주기로 진행 상태를 갱신해야 하는 경우.

차이 요약

	디바운싱	스로틀링
실행 시점	이벤트가 멈춘 뒤 마지막 한 번	정해진 간격마다 주기적으로
비유	엘리베이터(사람이 안 타면 출발)	일정 간격 정류장 버스
적합한 경우	최종 결과만 필요할 때	진행 중에도 주기적 반응이 필요할 때

사용자가 검색창에 입력할 때마다 API를 호출하면 너무 많아, 입력이 멈춘 뒤 한 번만 호출하고 싶다. 알맞은 기법은?

디바운싱 — 마지막 입력 이후 일정 시간이 지나면 한 번 실행한다.스로틀링 — 입력하는 내내 일정 간격마다 계속 실행한다.둘 다 부적합하며 모든 입력마다 즉시 호출해야 한다.