debounce와 throttle

프론트엔드 개발에서 debounce와 throttle는 성능 최적화와 사용자 경험 향상을 위해 자주 사용되는 기술입니다.

제가 담당하고 있는 서비스에서도 많이 쓰이진 않지만 debounce는 종종 보이곤 합니다.

 

처음 debounce를 마주했을 때 이걸 왜 쓰는지에 대해 알아봤는데 debounce와 함께 나오는 개념이 throttle과 함께 정리해봤습니다.

Debounce

Debounce는 특정 이벤트가 여러 번 발생할 때, 지정된 시간 동안 이벤트가 발생하지 않을 때까지 대기했다가 한 번만 실행되도록 하는 기술입니다. 이를 통해 연속된 이벤트 호출을 줄여 불필요한 처리를 방지합니다. 예를 들어, 사용자가 검색창에 글자를 입력할 때마다 검색 요청을 서버에 보내면 서버에 과부하가 걸릴 수 있습니다. 이 때 debounce를 사용하면 사용자가 입력을 멈춘 후 일정 시간 동안 입력이 없을 때 한 번만 검색 요청을 보냅니다.

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

const handleSearch = debounce((query) => {
    console.log('Searching for', query);
}, 300);

document.getElementById('searchInput').addEventListener('input', (event) => {
    handleSearch(event.target.value);
});

위 코드에서 handleSearch 함수는 사용자가 입력을 멈추고 300밀리초 후에만 실행됩니다.

Throttle

Throttle는 특정 이벤트가 여러 번 발생할 때, 지정된 시간 간격 동안 이벤트를 한 번만 실행되도록 하는 기술입니다. 이를 통해 이벤트가 일정 간격으로만 발생하게 하여 시스템 자원을 절약할 수 있습니다. 예를 들어, 사용자가 스크롤 이벤트를 발생시킬 때, 스크롤 이벤트 핸들러가 너무 자주 실행되면 성능 저하가 발생할 수 있습니다. 이 때 throttle을 사용하면 일정 시간마다 한 번씩만 이벤트가 실행되도록 제한할 수 있습니다.

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

const handleScroll = throttle(() => {
    console.log('Scroll event handler');
}, 200);

window.addEventListener('scroll', handleScroll);

위 코드에서 handleScroll 함수는 사용자가 스크롤할 때마다 200밀리초에 한 번씩만 실행됩니다.

요약

• Debounce: 지정된 시간 동안 이벤트가 발생하지 않을 때까지 대기 후 한 번 실행 (입력 필드의 실시간 검색).
• Throttle: 지정된 시간 간격마다 이벤트를 한 번만 실행 (스크롤, 리사이즈 이벤트).

이 두 개념은 특히 사용자 인터페이스에서 이벤트를 효율적으로 처리하여 성능을 최적화하고, 불필요한 서버 요청이나 화면 렌더링을 줄이는 데 매우 유용합니다.