쓰로틀(Throttle)과 디바운스(Debounce)

쓰로틀(Throttle)과 디바운스(Debounce)는 자주 사용되는 이벤트나 함수들(input, scroll 등)의 실행되는 빈도를 줄여 성능상의 유리함을 가져오기 위한 개념입니다.

쓰로틀과 디바운스의 예제를 보고 설명하겠습니다.

let throttle = null;

function onChangeText(e) {
	if(!throttle) {
    	setTimeout(() => {
        	console.log('쓰로틀', e.target.value);
          throttle = null;
        }, 500);
    }
  throttle = e.target.value;
}

먼저 쓰로틀(throttle)은 여러번 발생하는 이벤트를 일정 시간 동안 한번만 실행되도록 만듭니다.
즉, 몇 초에 한 번, 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것입니다.
위 예제에서는 최소 500밀리초마다 요청을 보냅니다.

let debounce = null;

function onChangeText(e) {
	clearTimeout(debounce);
  	debounce = setTimeout(() => {
    	console.log('디바운스', e.target.value);
    }, 500);
}

디바운스(debounce)는 여러번 발생하는 이벤트에서 가장 마지막 이벤트만 실행되도록 만드는 것입니다.
위 예제에서는 500ms동안 입력이 없으면 입력이 끝난 것으로 치고 500ms 이전에 입력이 발생하면 이전 타이머는 최소하고 새로운 타이머를 다시 설정하게 됩니다.

쓰로틀과 디바운스의 차이점은 이벤트를 발생시키는 시점의 차이입니다.
쓰로틀은 입력이 시작되면 일정 주기로 계속 실행되지만, 디바운스는 입력이 끝날 때까지 계속해서 기다립니다.

보통 디바운스는 ajax 호출할 때, 쓰로틀은 scroll 이벤트와 같이 연속해서 호출되는 이벤트에 많이 쓰입니다.