디바운스(Debounce)와 스로틀(Throttle) 그리고 차이점
Throttle 와 Debounce 개념 정리하기

Debounce와 Throttle은 자주 사용되는 이벤트나 함수들의 실행되는 빈도를 줄여서 성능을 개선하는 decorator이다. 여기서 decorator(장식자)란, 클래스 프로퍼티나 메소드 혹은 클래스 자체를 수정하는데 사용되는 자바스크립트 함수를 의미한다.

예를 들어, scroll event가 발생할 때마다 어떤 콜백이 실행된다면, 계속 이벤트가 일어날 때마다 콜백이 일어나 과도한 작업이 실행되어 성능 문제가 발생할 수 있다. 이런 상황에서 이벤트 핸들러가 많은 연산을 수행하는 경우 이에 제약을 걸어 제어할 수 있는 수준으로 바꿀 때 Debounce와 Throttle를 사용한다.

debounce와 throttle

debounce

Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 한다. 즉 연이어 호출되는 함수들 중 마지막 함수만 호출하는 것이다.

var debounce = null;

clearTimeout(deounce);
debounce = setTimeout(() => {
  console.log(
    'debounce', el.target.value
  )
}, 500);

위 코드에서 debounce는 키보드 입력이 발생하면 500ms 동안 기다리다가, 그 안에 키보드 입력이 다시 발생하면 또 다시 시간을 초기화 하고 기다린다. 그렇게 가장 500ms가 지나고 나서 최신의 value를 출력하게 된다.

throttle

Throttle은 이벤트를 일정 주기마다 발생하도록 한다. 일정 시간동안의 입력을 모아서 한번씩 출력을 제한한다.

var throttle = null;

if (!throttle) {
  setTimeout(() => {
    console.log('throttle', thrtle);
    throttle = null;
  }, 500);
}
throttle = el.target.value;

throttle은 키보드 입력이 발생하면 그로부터 500ms 후에 가장 최신의 value를 출력하고, 초기화하여 키보드 입력이 끝날 때까지 반복한다.

언제 무엇을 사용해야 할까?

작업물의 성격에 따라 사용하는 것이 가장 좋다. 사용자 측면에서는 throttle이 자연스럽지만, 성능상에서는 debounce가 유리하다.