🖋️ Debounce 와 Throttle 의 단순 비교

• Debounce

  • 처리 순서

    • Event Trigger (이벤트 트리거)
    • Delay Reset (지연 재설정)
    • Function Execute (함수 실행)
    • Potential for No Execution (실행되지 않을 가능성)

  • 이벤트가 발생하여 Delay 끝나기 전에 다시 이벤트가
    트리거 되면 Delay 타이머 재설정 (반복)
    더이상 이벤트가 발생하지 않으면 최종적으로 함수 실행
    
    Delay 내에 이벤트가 계속 트리거 되면 함수 실행은
    무기한 연기될 수 있음

    
    

  • 요약

    • Debounce는 함수를 실행하기 전에 이벤트가 일시 중지될 때까지 기다립니다. 버스트의 마지막 이벤트(다음에 일시 중지)만 함수 실행으로 이어집니다.

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

// Example usage:
const handleInput = debounce(() => console.log('Input handled'), 500);
window.addEventListener('input', handleInput);

• Throttle

  • 처리 순서

    • Event Trigger (이벤트 트리거)
    • Function Execution (함수 실행)
    • Cooldown Period (쿨다운 기간)
    • Next Execution (다음 실행)
    • Guaranteed Execution (실행 보장)

  • 이벤트 발생, 함수는 첫 이벤트 트리거 시 즉시 실행
    실행 후 후속 이벤트가 기능을 트리거하지 못하게
    쿨다운 기간 시작, 쿨다운 기간이 종료되면 다시 이벤트 트리거 OK
    
    이벤트가 계속해서 트리거 되면 함수는 지정된 쿨다운 기간보다 
    자주 실행되지 않지만 실행은 보장

    
    

  • 요약

    • Throttle은 트리거된 이벤트 수에 관계없이 기능이 최대 속도로 실행되도록 보장합니다. 이벤트가 계속 발생하는 한 정기적인 실행 간격을 보장합니다.

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

// Example usage:
const handleScroll = throttle(() => console.log('Scroll handled'), 500);
window.addEventListener('scroll', handleScroll);

• 동일한 시간으로 비교

  • 디바운스

    • 이벤트-이벤트-이벤트--------------->실행

  • 스로틀

    • 이벤트-실행-------이벤트-이벤트---------실행

• 결론

Debounce를 사용하면 검색창에 입력을 완료하는 등 작업이 완료되거나 일시 중지된 후에 함수가 실행되도록 해야 합니다.

Throttle은 스크롤이나 크기 조정 이벤트 처리와 같이 브라우저나 서버에 과부하가 걸리는 것을 방지하기 위해 함수가 일관된 속도로 실행되도록 해야 할 때 사용합니다.