2024.08.07

디바운싱(debouncing)과 쓰로틀링(throttling)

포로그래밍 기법 중 하나로

디바이스의 무리를 주지 않기 위해 사용되는 기법

 

 

 

디바운싱(debouncing)

이 기법은 사용자가 입력을 멈추거나 특정 행동을 완료할 때만 함수를 실행하게 합니다.

이벤트가 발생하는 빈도가 높을 때 성능을 개선하고, 불필요한 연산이나 네트워크 요청을 줄이는데 유용합니다.

window.addEventListener('input', debounce(function(e) {
    console.log(e.target.value);
}, 200));

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

 

타이머 설정 →  타이머 초기화 → 최종 호출

주어진 시간(딜레이)이 경과할 때까지 함수 호출을 지연시키는 방법입니다. 이 시간 동안 추가적인 호출이 발생하면 타이머를 초기화하여 함수 호출을 연기합니다. 최종적으로 설정된 딜레이 시간이 지나면 함수가 한 번만 호출 됩니다.

 

입력 필드, 스크롤 이벤트, 창 크기 조정 등과 같은 상황에서 유용합니다.

 

 

 

쓰로틀링(throttling)

주어진 시간 동안 함수 호출을 일정한 빈도로 제한하는 기법입니다.

즉, 특정 시간 간격으로만 함수를 호출하게 해서 성능을 개선하고 불필요한 연산을 줄이는 방법입니다. 

 

window.addEventListener('input', throttle(function(e) {
    console.log(e.target.value);
}, 200));

function throttle(func, delay) {
    let timer;
    return function() {
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    }
}

시간 간격 설정 →  함수 호출 제한 →  시간 기반 호출

함수 호출의 빈도를 제어합니다. 일반적으로 주어진 시간 간격(예: 300ms) 동안 한 번만 함수를 실행하도록 제한합니다.

이 방법은 이벤트가 너무 자주 발생할 때, 즉 호출 빈도가 높을 때 유용합니다.

 

스크롤 이벤트, 창 크기 조정, 리사이즈 이벤트

 

디바운싱 vs 쓰로틀링

디바운싱(debouncing)  :  이벤트가 멈춘 후 일정 시간 지연 후 함수 호출 됩니다. 이벤트가 발생하면 타이머가 초기화됩니다. (주로 이력, 검색 제안 등에 사용)

 

쓰로틀링(throttling)  : 일정 시간 간격으로 함수 호출을 제한합니다. 연속적으로 발생하는 이벤트를 일정 주기마다 처리합니다. (주로 스크롤, 리사이즈 이벤트)

 

쓰로틀링과 디바운싱은 서로 다른 상황에서 유용하며, 필요에 따라 적절한 방법을 선택하여 사용합니다.