Debouncing

Debouncing

NOTE

Debouncing은 이벤트가 발생할 때마다 즉시 처리를 하지 않고, 일정 시간 동안 이벤트가 발생하지 않으면 그때서야 함수를 실행하는 방식입니다. 예를 들어, 사용자가 검색창에 텍스트를 입력할 때, keyup 이벤트마다 서버에 API 요청을 보내는 것 대신, 입력이 멈춘 후 일정 시간 동안 기다렸다가 서버 요청을 보내는 방식입니다.

• 동작 원리: 이벤트가 연속적으로 발생하는 동안, 이전 호출은 취소되고 일정 시간이 지난 후 마지막 호출만 실행됩니다.

• 사용 예시:

  • 사용자가 텍스트 입력 필드에 타이핑할 때마다 서버로 API 호출을 보내지 않도록 함

  • 윈도우 크기 변경, 스크롤 이벤트 등에서 과도한 계산을 피하기 위해 사용

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func(...args);
        }, delay);
    };
}
 
document.getElementById('searchInput').addEventListener('input', debounce(function() {
    console.log('검색어:', this.value);
}, 500));