Throttling & Debouncing

Throttle, Debounce

Throttle과 Debounce는 자주 사용되는 이벤트나 함수들의 실행 빈도를 줄여서 성능 상의 유리함을 가져오는 개념이다.

자주 사용되는 예로는 자동 완성이 있다.

키보드가 한 글자씩 입려될 때마다 api로 데이터를 가져오게 되면, 사용자의 의도와 무관한 요청이 자주 발생되는데, 이를 줄이기 위해 입력이 끝난 후 또는 입력되는 중간 중간 api를 가져온다면, 성능에서 매우 유리해진다.

• Throttle은 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아서, 한 번씩 출력을 제한한다.

• Debounce는 입력 주기가 끝나면 출력한다.

[예제]

// html
<input id="search" type="search" name="search" value="" />

input에 keyup event listener를 등록한다.

var debounce = null;
var throttle = null;
function keyUpFn(el) {
  // normal
  console.log('normal', el.target.value, new Date().getTime());
  // debounce
  clearTimeout(debounce);
  debounce = setTimeout(() => {
    console.log(
      'debounce',
      el.target.value, new Date().getTime());
  }, 500);
  // throttle
  if(!throttle) {
    setTimeout(() => {
      console.log('throttle', throttle, new Date().getTime());
      throttle = null;
    }, 500);
  }
  throttle = el.target.value;
}
document.getElementById("search").addEventListener('keyup', keyUpFn);
// normal h         1583658583270
// normal he        1583658583582
// normal hel       1583658583878
// normal hell      1583658584182
// throttle hell    1583658584271
// 입력이 끝남
// normal hello     1583658584534
// debounce hello   1583658585036
// throttle hello   1583658585536

위 코드의 과정을 살펴보면

1. Input Search Element에 Keyup Event Listener를 등록한다.

2. normal에서는 키보드 입력이 발생하면, 그 즉시 value를 출력한다.

3. throttle에서는 키보드 입력이 발생하면, 500ms 후에, 가장 최신 value를 출력하고 초기화 해서 키보드 입력이 끝날 때까지 이 과정을 반복한다.

4. debounce에서는 키보드 입력이 발생하면, 500ms 동안 기다리고, 그 안에 키보드 입력이 발생하면 시간을 초기화하고 다시 기다렸다가 가장 최신의 value를 출력한다.

Throttle

Throttle은 여러 번 발생하는 이벤트를 일정 시간 동안 한 번만 실행되도록 만드는 개념이다.

위 예제에서 500ms 동안 이벤트 실행을 막고, 한번만 실행하기 때문에 잦은 이벤트 발생을 막아 성능상의 유리함을 가져올 수 있다.

Debounce와 다른 점은 이벤트 발생 시간 이후에 일정 시간 동안만을 기다리고, 이벤트를 실행한 후 다시 기다린다는 점이다.

Debounce

Debounce는 여러 번 발생하는 이벤트에서 가장 마지막 이벤트만을 실행되도록 만드는 개념이다.

위 예제에서 입력이 끝난 500ms 동안 동일한 이벤트가 계속해서 발생한다면, 입력이 끝날 때 가장 마지막 이벤트만 실행해서 성능상 유리함을 가져올 수 있다.

Throttle과 다른 점은, 마지막 이벤트에서 일정 시간 동안 이벤트가 발생한다면 또 일정 시간을 기다린다는 점이다.

Throttle과 Debounce의 차이점

Throttle과 Debounce의 차이점은 이벤트를 언제 발생시킬지의 시점 차이다.

Debounce는 입력이 끝날 때가지 무한적으로 기다리지만, Throttle은 입력이 시작되면 일정 주기로 계속 실행한다.

Debounce의 시간을 짧게 가져간다면, Throttle과 비슷한 효과가 날 수 있지만, 그럼에도 시점에서 차이가 발생할 수 있다.

그래서 작업물의 성격에 따라 사용 방법이 달라질 수 있다.

대표적인 예로 자동완성을 만들 경우,
일정 주기로 자동으로 완성되는 리스트를 보여주는 경우
사용자 측면에서 Throttle(검색되는 경험)이 유리할 수 있지만,
성능상에서는 Debounce(1번만 호출)가 훨씬 유리할 수 있다.