[js] Debouncing

Debouncing은 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나기 전까지는 해당 이벤트 핸들러가 실행되지 않도록 하는 기법.

주요 목적은 자주 발생하는 이벤트를 제어하여 성능을 최적화하고, 불필요한 함수 호출을 줄이는 것

 

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}



//
<input type="text" id="searchInput" placeholder="Search...">

<script>
function search(query) {
    console.log(`Searching for: ${query}`);
    // 실제 API 호출 코드가 여기에 들어갑니다.
}

const debouncedSearch = debounce(function() {
    const query = document.getElementById('searchInput').value;
    search(query);
}, 300);

document.getElementById('searchInput').addEventListener('input', debouncedSearch);
</script>

 

Debouncing을 사용해야 하는 상황

 - 연속된 입력 필드 입력, 창 크기 조정, 스크롤 이벤트 등

 

Debouncing 장점

 - 성능 최적화, 효율적인 자원 사용, 사용자 경험 개선