디바운스와 스로틀

디바운스 (Debounce)

디바운스는 이벤트가 발생한 후 일정 시간 동안 추가적인 이벤트가 발생하지 않을 때만 최종적으로 이벤트 핸들러를 실행하는 기법입니다. 예를 들어, 사용자가 입력을 마칠 때까지 기다렸다가 마지막 입력에서만 API를 호출하는 경우에 유용합니다.

 

작동 원리

1. 이벤트가 발생하면 타이머를 시작합니다.
2. 이벤트가 다시 발생하면 타이머를 리셋합니다.
3. 타이머가 만료되면 이벤트 핸들러를 실행합니다.

예제 코드

function debounce(callback, delay) {
    let timerId;
    return event => {
        if(timerId)clearTimeout(timerId);
        timerId = setTimeout(callback, delay, event);
    };
}

쓰로틀 (Throttle)

쓰로틀은 이벤트를 일정한 주기로만 실행하도록 제한하는 기법입니다. 예를 들어, 스크롤 이벤트나 윈도우 리사이징 이벤트 같이 매우 빈번하게 발생하는 이벤트를 처리할 때 유용합니다.

 

작동 원리

1. 이벤트가 발생하면 이벤트 핸들러를 실행합니다.
2. 지정된 시간 동안 추가 이벤트 핸들러 실행을 차단합니다.
3. 시간이 지나면 다음 이벤트가 다시 핸들러를 실행할 수 있습니다.

예제 코드

function throttle(callback, delay) {
    let timerId;
    return event => {
        if(timerId) return;
        timerId = setTimeout(() => {
            callback(event);
            timerId = null;
        ), delay, event };
    };
}