글을 시작하며

디바운스와 쓰로틀은 자바스크립트에서 과도한 이벤트 호출을 제한하는 기법으로 주로 성능 최적화를 위해 사용됩니다.
이번 글에서는 두 기법의 차이점과 사용 사례, 구현 방법에 대해 알아보고자 합니다.

글을 읽기 전 setTimeout이 반환하는 타이머 ID를 이해하고 있어야 합니다. 타이머 ID는 setTimeout 함수를 호출할 때마다 내부적으로 생성되는 고유한 식별자로, clearTimeout 함수를 사용하여 타이머를 취소할 때 필요합니다.

디바운스 (Debounce)

디바운스는 특정 시간 동안 이벤트가 발생하지 않을 때 마지막 이벤트를 처리하는 기법입니다. 쉽게 말해, 짧은 시간 간격으로 이벤트가 연속해서 발생하면 무시하고, 일정 시간이 경과된 후에 가장 마지막 이벤트의 핸들러만 한 번 호출되도록 하는 방식입니다.
예를 들어 디바운스의 delay를 1ms로 설정한다면, 이벤트 발생 후 1ms 동안 추가 이벤트가 발생하지 않을 경우에만 해당 이벤트가 호출됩니다.

const debounce = (callback, delay) => {
  let timerId;

  return (...args) => {
    // 이전 타이머가 존재한다면 취소
    if (timerId) clearTimeout(timerId);

    // 새로운 타이머 설정
    timerId = setTimeout(callback, delay, ...args);
  };
};

이벤트가 발생할 때마다 이전 타이머를 취소하고 새로운 타이머를 설정합니다. 이벤트가 발생한 후 delay 시간이 경과하면 타이머가 만료되어 callback 함수가 호출되는 방식입니다.

쓰로틀 (Throttle)

쓰로틀은 일정 시간 간격으로 이벤트를 처리하는 기법입니다. 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화하여 일정 시간 단위로 이벤트 핸들러가 호출되도록 제어합니다.
예를 들어 쓰로틀의 delay를 1ms로 설정한다면 해당 이벤트는 1ms동안 최대 1번만 호출됩니다.

const throttle = (callback, delay) => {
  let timerId;

  return (...args) => {
    // 이미 타이머가 실행중이라면 무시
    if (timerId) return;

    // 새로운 타이머 설정
    timerId = setTimeout(() => {
      callback(...args);
      timerId = null;
    }, delay);
  };
};

타이머가 설정되어 있지 않다면 타이머를 설정합니다. 타이머는 delay 시간이 경과하면 만료되어 callback 함수가 호출되고, 타이머를 초기화합니다.

디바운스 vs 쓰로틀: 언제 사용해야 할까?

디바운스

• 사용자 입력이 완전히 멈출 때까지 기다려야 하는 경우
• 사용자 입력 처리, 폼 제출 등
• 마지막 이벤트만 처리하고 싶을 때

쓰로틀

• 일정 주기로 이벤트를 처리해야 하는 경우
• 스크롤, 리사이즈, 마우스 이동 등 지속적인 이벤트
• 부하를 줄이면서 이벤트를 꾸준히 처리해야 할 때

결론

디바운스와 쓰로틀은 모두 이벤트 최적화 기법으로, 비슷한 목적을 가지고 있지만 사용되는 상황과 동작 방식에서 차이가 있습니다. 디바운스는 연속된 이벤트를 무시하고 마지막 이벤트만 처리하고, 쓰로틀은 일정 시간 간격으로 이벤트를 처리하여 과도한 호출을 방지합니다. 각각의 특성을 이해하고 프로젝트의 요구사항을 고려하여 적절한 기법을 선택해보세요!