eventrate-limit

debounce와 throttle의 차이를 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

검색창에는 왜 debounce가 자주 쓰이나요?

부가 설명

function debounce(fn, delay) {
  let timerId;
 
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

입력 이벤트가 계속 들어오면 이전 timer를 취소하고 새 timer를 잡습니다.

function throttle(fn, delay) {
  let lastRun = 0;
 
  return (...args) => {
    const now = Date.now();
    if (now - lastRun < delay) return;
    lastRun = now;
    fn(...args);
  };
}

정해진 간격보다 빨리 들어온 호출은 무시합니다.

두 기법 모두 성능 최적화처럼 보이지만 사용자 경험과도 관련이 있습니다. 검색 요청을 키 입력마다 보내면 서버와 UI 모두 부담이 크고, scroll 이벤트를 매번 처리하면 frame drop이 생길 수 있습니다.

다만 leading/trailing 옵션에 따라 “처음에도 실행할지”, “마지막에도 실행할지”가 달라질 수 있습니다.

한 줄 정리

debounce는 멈춘 뒤 한 번, throttle은 계속 발생해도 일정 간격마다 한 번 실행합니다.