쓰로틀링(Throttling)과 디바운스(Debouncing)의 차이점

프론트엔드 개발에서는 사용자의 이벤트(스크롤, 입력 등)가 연속적으로 발생할 때, 이를 적절하게 처리하지 않으면 성능 문제로 이어질 수 있다. 이런 상황을 해결하기 위해 `쓰로틀링(Throttling)`과 `디바운스(Debouncing)`가 사용된다. 두 기법 모두 이벤트를 제한하여 성능을 최적화하지만, 동작 방식과 목적은 다르다.

 

1. 쓰로틀링(Throttling)이란?

쓰로틀링은 특정 시간 동안 하나의 이벤트만 실행되도록 제한하는 기법이다. 이벤트가 반복적으로 발생하더라도 지정한 시간 동안 최대 한 번만 실행된다. 즉, 일정한 간격으로 이벤트를 발생시키는 것이다.

사용 사례:
- 스크롤 이벤트: 사용자가 페이지를 스크롤할 때마다 이벤트가 계속해서 발생하지만, 이를 실시간으로 처리하면 성능 저하가 발생할 수 있다. 쓰로틀링을 사용하면 스크롤 이벤트가 일정 시간마다 한 번씩만 실행되도록 제한할 수 있다.

코드 예시:

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      func(...args);
      lastTime = now;
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('스크롤 중...');
}, 1000));

위 코드에서 `scroll` 이벤트는 1초마다 한 번씩만 실행된다. 사용자가 빠르게 스크롤하더라도, 쓰로틀링 덕분에 성능에 부담이 가지 않는다.

 

 2. 디바운스(Debouncing)란?

디바운스는 이벤트가 연속해서 발생하면 일정 시간 동안 대기하고, 그 대기 시간 이후에 이벤트를 실행하는 기법이다. 즉, 이벤트가 계속 발생하는 동안은 실행되지 않다가, 일정 시간이 지나 이벤트 발생이 멈추면 마지막에 한 번만 실행된다.

사용 사례:
- 검색 자동완성: 사용자가 검색어를 입력할 때마다 API 요청을 보내면 과도한 요청이 발생할 수 있다. 디바운스를 사용하면 사용자가 입력을 멈춘 후 일정 시간 이후에 한 번만 요청을 보내도록 할 수 있다.

코드 예시:

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

const input = document.getElementById('search');
input.addEventListener('input', debounce(() => {
  console.log('API 요청 보내기');
}, 500));

이 예제에서 사용자가 검색어를 입력할 때마다 `input` 이벤트가 발생하지만, 입력을 멈추고 500ms가 지나면 그때 비로소 함수가 실행된다. 이는 불필요한 API 요청을 줄이는 데 유용하다.

 

3. 쓰로틀링과 디바운스의 차이점

 

구분	쓰로틀링(Throttling)	디바운스(Debouncing)
실행 타이밍	일정 시간마다 한 번씩 실행	이벤트가 멈춘 후 일정 시간 후에 한 번 실행
주된 목적	이벤트가 자주 발생하는 것을 제한	이벤트가 끝난 후 한 번만 실행
사용 사례	스크롤, 리사이즈	검색, 버튼 클릭 방지, 자동완성

 

결론

• 쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것