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

디바운싱(Debouncing) 이란?

디바운싱은 연속적으로 발생하는 이벤트를 글로벌화해서 마지막 이벤트만 실행되도록 하는 기술이다. 사용자가 빠르게 연속해서 입력할 때, 모든 입력마다 함수를 실행하지 않고 마지막 입력 후 일정시간 대기 후에 함수를 실행하는 방식이다.

디바운싱에서 전역 상태관리가 필요한 이유는, 모든 화면 위에서 관리해야 하기 때문이다.

 

 

나의 경우에 입력을 완료하고 직후에 실행되는 자동저장 기능을 구현하기 위해 디바운싱을 적용했다. 매 입력마다 저장을 실행하면 API 호출도 너무 많고, 저장되는 동안 새로운 저장이 실행될 수 있기 때문에 디바운싱이 필요하다 판단하였다. 

 

 

디바운싱이 필요한 사례 

1. 검색창 자동완성

2. 입력값 유효성 검사

3. 자동저장

 

다음은 검색어 입력의 디바운싱 예제이다.

 

// 디바운스 함수 정의
function debounce(func, delay) {
  let timer;
  return function (...args) {
    // 이전 타이머가 있다면 취소 (연속 호출 방지)
    if (timer) clearTimeout(timer);
    
    // 일정 시간(delay) 후에 함수 실행
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 적용할 실제 함수 (예: API 호출)
const handleSearch = (query) => {
  console.log(`API 요청 보냄: ${query}`);
};

// 500ms(0.5초) 디바운싱 적용
const debouncedSearch = debounce((e) => handleSearch(e.target.value), 500);

// 사용법 (Input 이벤트에 연결)
// document.querySelector('input').addEventListener('input', debouncedSearch);

 

 

 

쓰로틀링(Throttling) 과의 차이점

 

쓰로틀링 (Throttling) 이란 정해진 주기마다 1번씩 실행하는 기술이다. 무한 스크롤 등에서 사용한다. 

디바운싱과는 사용 목적이 다르다. 스크롤을 내릴 때 특정 지점에서 데이터를 계속 불러와야 하는 무한 스크롤은 디바운싱보다 쓰로틀링이 적합하다. 디바운싱을 쓸 경우 사용자가 스크롤을 완전히 멈춰야만 다음 데이터가 나올 것이다.