디바운싱, 쓰로틀링

디바운싱

이벤트가 여러 번 발생해도 일정 시간 내에 마지막 한 번만 실행
검색창 등 입력시 실시간으로 데이터를 보여줄때 입력마다 api 호출시켜 낭비시키는 현상을 줄일 수 있음

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));

쓰로틀링

이벤트가 여러 번 발생해도 일정 시간 간격으로 이벤트를 실행
스크롤 이벤트등에서 연속적으로 이벤트 실행시 부하가 걸릴수 있어 시간 간격을 두고 실행시켜 부하를 줄일수 있음

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event');
}, 1000));

참고 자료

이 바닐라 자바스크립트 예제들을 통해 디바운싱과 쓰로틀링을 구현하고 활용하는 방법을 이해할 수 있습니다. 외부 라이브러리 없이도 간단하게 이벤트 핸들링을 최적화할 수 있습니다.