[JS] 디바운스

디바운스(Debounce)란?

디바운스는 연이어 발생하는 이벤트를 그룹화하여, 지정된 시간이 지난 후 단 한 번만 함수가 실행되도록 제어하는 프로그래밍 기법이다.

쉽게 말해 "타이머 초기화". 사용자가 계속해서 액션을 취하면 실행을 미루다가, 액션을 멈추고 일정 시간(예: 300ms)이 지났을 때 비로소 작업을 수행하는 것.

가장 대표적인 예시: 검색어 자동완성

'apple'를 검색창에 입력한다고 가정해 보자.
사용자가 a, p, p, l, e를 칠 때마다 API 서버에 검색 요청을 보낸다면 불필요한 네트워크 리소스가 크게 낭비된다. 이때 디바운스를 적용하면, 사용자가 타이핑을 잠시 멈췄을 때(예: 0.3초 동안 추가 입력이 없을 때) 단 한 번만 'apple'로 API 요청을 보내게 된다.

Debounce 함수의 원리와 구현

디바운스는 자바스크립트의 클로저(Closure)를 활용하여 구현할 수 있다.

function debounce(func, delay) {
  let timerId; // 타이머 ID를 기억할 변수 (클로저에 의해 유지됨)

  return function (...args) {
    // 새로운 이벤트가 발생하면 이전 타이머를 취소합니다.
    if (timerId) {
      clearTimeout(timerId);
    }
    
    // 새로운 타이머를 설정합니다. delay 시간이 지나면 func를 실행합니다.
    timerId = setTimeout(() => {
      func.apply(this, args);// this 컨텍스트와 인자를 원본 함수에 전달
    }, delay);
  };
}

// 사용 예시
const handleSearch = debounce((query) => {
  console.log('API 요청:', query);
}, 300);

// 이벤트 리스너에 연결 (예: input 태그)
// document.querySelector('input').addEventListener('input', (e) => handleSearch(e.target.value));

코드 핵심 포인트:

• timerId 변수는 외부 함수가 종료되어도 내부 함수에서 계속 참조할 수 있다(클로저).
• 새로운 이벤트가 들어올 때마다 clearTimeout이 호출되어 이전의 타이머를 파기하고 새 타이머를 돌린다. 즉, delay 시간 내에 계속 입력이 발생하면 실제 함수(func)는 절대 실행되지 않는다.