Throttle와 Debounce

 

 

최근 바닐자 자바스크립트로 웹페이지를 구현하는 연습을 하고 있는데, 검색기능과 자동완성 기능을 구현할 때  Throttle과 Debounce 개념을 알게 되었다. Throttle과 Debounce를 사용하면 이벤트나 함수 호출의 빈도를 줄여 성능을 최적화 하는데 도움이 된다. 검색 기능에선 키보드 키를 하나씩 입력할 때마다 api 호출을 통해 데이터를 불러오게 되면 지나치게 많은 api 호출이 발생하기 때문에 비효율성을 초래하게 된다. 따라서 사용자의 키 입력이 끝났다고 판단된 이후나 입력이 어느 정도 된 중간 중간 검색을 시도하도록 최적화할 필요가 있다. 

 

두 가지의 차이점을 알아보도록 하겠다. 

 

Throttle 와 Debounce 의 차이점은 이벤트를 언제 발생 시킬지의 시점 차이이다. Throttle은 일정한 주기마다 무조건 이벤트를 발생하도록 하는 것이며 Debounce는 처리해야 일을 잠시 미뤄두었다 마지막에 한번만 실행하는 것이다. 

 

✔️Throttle : 입력이 시작되면, 일정 주기로 계속 실행한다. 여러번 수행해야 하는 일을 일정 시간 동안 한번만 실행되도록 만드는 것이다.

 

✔️Debounce : 수행해야 하는 일을 즉시 처리하는 것이 아니라 잠시 일들을 미루었다가 한번에 실행하는 방법이다. 단순히 이벤트를 처리하는 방법만을 나타내진 않는다.  setTimeout 내 설정된 시간 보다 먼저 이벤트가 발생하면 clearTimeout으로 이벤트를 발생시키지 않고 다시 시간을 재기 시작한다.

 

Debounce 의 시간을 짧게 설정하게 되면 Throttle 와 비슷한 효과가 날 수 있지만 시점에서 차이가 날 수 있기 때문에 서비스 의도에 따라 선택적으로 사용할 수 있다. 하나의 예로 자동완성 기능을 구현하는 경우, 사용자 친화적인 방법으로 일정 주기로 자동 완성되는 리스트를 보여주고 싶은 경우 Throttle가 유리할 수 있지만 성능면에서는 시간 설정이 너무 짧지 않다는 가정하에 Debounce가 유리할 수 있다.

 

*다음 코드는 자동완성기능을 예시로 작성했습니다. 사용자가 입력한 값을 전달해 api 호출을 해야 하지만, 편의상 콘솔 출력으로 대체하였습니다.

 

⭐Throttle

let throttle = null;

const keyUpFun = () => {
  if (throttle) return;

  throttle = setTimeout(() => {
    console.log("api 호출");
    throttle = null;
  }, 500);
};

document.addEventListener("keyup", keyUpFun);

⭐Debounce

let debounce = null;

const keyUpFun = () => {
  if (debounce) {
    clearTimeout(debounce);
  }
  debounce = setTimeout(() => {
    console.log("api 호출");
  }, 500);
};

document.addEventListener("keyup", keyUpFun);