디바운싱 (Debouncing)

디바운싱은 짧은 시간 동안 이벤트가 여러 번 발생해도 마지막 이벤트만 실행되도록 조절하는 기법입니다.

주로 검색창 입력, 윈도우 리사이즈 이벤트 등에서 불필요한 API 호출을 줄이기 위해 사용됩니다.

동작 원리

  1. 이벤트가 발생할 때마다 타이머를 초기화합니다.
  2. 일정 시간이 지난 후에만 콜백 함수가 실행됩니다.
  3. 짧은 시간 내에 동일한 이벤트가 다시 발생하면 이전 타이머가 취소됩니다.

코드 예제

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

// 사용 예제: 검색창 입력 이벤트 디바운싱 적용
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', debounce((event) => {
    console.log('Search query:', event.target.value);
}, 500));

디바운싱을 적용해야 하는 경우