[자바스크립트] 10. Debouncing & Throttling

자바스크립트 코드를 작성할 때 EventListener를 사용해 코드를 작성하는 경우가 자주 있는데, 검색이나 스크롤의 경우 그 요청의 수가 엄청나게 늘어나는 경우가 자주 있다.
이런 경우에 적용할 수 있는 기법이 바로 Debouncing과 Throttling이다.

개념 설명 전 문서에 아래와 같은 DOM 요소가 존재한다고 하자.

<input id="search" />

그리고 아래와 같은 방식으로 EventListener를 사용할 수 있다.

document.querySelector('#search').addEventListener("input", (e) => {
  console.log("검색 요청", e.target.value);
})

이처럼 코드를 작성하면 엄청난 양의 쿼리가 발생해 결과적으로 비용의 증가를 초래할 수 있다.

Debouncing

연이어 호출되는 함수 중에서 마지막 함수 or 맨 처음 함수만 호출되도록 한다.
타자를 칠 때마다 타이머를 설정해, 일정 시간동안 입력이 없으면 입력이 끝난 것으로 간주한다.
일정 시간(여기서는 300ms) 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 설정한다.

let timer;

document.querySelector('#search').addEventListener("input", (e) => {
  if(timer) clearTimeout(timer);
  timer = setTimeout(function() {
    console.log("검색 요청(Debounce) : ", e.target.value)
  }, 300);
})

Throttling

디바운싱과 비슷하지만 입력하는 동안에도 바로 이전에 요청한 작업을 주기적으로 실행한다.
마지막 함수가 호출된 후 일정 시간이 지나기 전까지 다시 호출되지 않도록 한다.
타이머가 설정되어 있으면 아무 동작도 하지 않고, 타이머가 없다면 타이머를 설정한다.
타이머는 일정 시간 후에 스스로를 해제하고 요청을 날린다.

let timer;

document.querySelector("#search").addEventListener("input", (e) => {
  if (!timer) {
    timer = setTimeout(() => {
      timer = null;
      console.log("검색 요청(Throttling) : ", e.target.value);
    }, 300);
  }
})

참고 자료 : zerocho - 쓰로틀링과 디바운싱