디바운스와 쓰로틀

2025-04-07 TIL-디바운스와 쓰로틀

디바운스와 쓰로틀

디바운스(debounce)와 쓰로틀(throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법이다.

이 두 가지 방법은 비슷해 보이지만, 동작 방식에 차이가 있다.

디바운스

• 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식이다.

  • 이를 통해 이벤트 핸들러가 과도하게 호출되는 것을 방지할 수 있다.

• 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보내는 방식으로 디바운스를 적용할 수 있다.

쓰로틀

• 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식이다.

  • 즉, 이벤트가 지속적으로 발생하더라도 설정된 시간 간격 내에는 한 번만 실행된다.

• 예를 들어, 사용자가 연속 클릭을 한다면 클릭할 때마다 이벤트가 발생하는데, 이를 매번 처리하면 부하가 불필요하게 커지니, 쓰로틀을 적용해 일정 간격 내 한 번만 처리하게 할 수 있다.

디바운스와 쓰로틀 예시 코드

// 디바운스 예시
function debounce(callback, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => callback.apply(this, args), delay);
  };
}

// 쓰로틀 예시
function throttle(callback, delay) {
  let waiting = false;
  return function (...args) {
    if (!waiting) {
      callback.apply(this, args);
      waiting = true;
      setTimeout(() => (waiting = false), delay);
    }
  };
}

무한 스크롤 구현 시, 어떤 방식을 선택할 것인가?

쓰로틀을 사용하는 것이 더 적합하다.

• 스크롤은 연속적인 동작이며 사용자가 페이지 하단에 도달했을 때 즉각적인 반응을 기대한다.

• 쓰로틀은 스크롤이 하단에 위치하게 된 순간, 즉시 추가 데이터 요청을 수행하므로 사용자에게 더 자연스로운 스크롤 경험을 제공할 수 있다.

반면, 디바운스를 사용할 경우 사용자가 반복적으로 스크롤 한다면 마지막 스크롤이 멈춘 후에야 데이터를 불러오기 시작하므로 지연이 발생할 수 있다.