Javascript debounce, throttle

debounce와 throttle은 이벤트가 연속적으로 발생했을때 제어하기 위해 사용을 합니다.

 

간략히만 제 언어로 먼저 설명해보자면

debounce는 연속된 이벤트를 계속 뒤로 미루어 제일 나중의 이벤트를 실행시켜주고 

throttle는 일정한 간격으로 연속으로 발생되는 이벤트를 실행시켜 줍니다.

 

예를들어 버튼을 클릭할때마다 이벤트가 발생한다고 가정해봅시다. 

그러면 이벤트는 아래와 같이 발생될겁니다.

 

버튼 클릭 20

debounce 1

throttle 6 

번 정도의 횟수로 이벤트가 발생될겁니다. 이는 물론 시간을 어떻게 설정하느냐에 따라 달라질것 입니다.

 

이제 상세히 코드와 함께 살펴보겠습니다.

 

 

debounce

 

debounce가 사용되는 대표적인 예시중 하나입니다.

검색어가 변경될 때마다 api를 날리면 매번 날릴수도 있지만 아직 입력중이라면 중간의 키워드만 가지고 api를 보내는건 비효율적일수 있습니다.

ex) 검색어가 12345인데 123의 결과를 보여주는 행위

그래서 setTimeout과 clearTimeout webApi를 통해 검색어가 전부 완료되었을 때에만 api를 보내 추천 결과를 가져올수 있습니다.

코드 먼저 보겠습니다.

우선 아래와 같이 debounce input과 throttle input이 있습니다.

 

const debounce = (func, delay) => {
  let timer
 
  // 클로저를 이용 timer를 제어 
  // timer가 있다면 clearTimeout, 없다면 입력받은 delay를 가지는 setTimeout 실행
  // 입력이 계속 들어온다면 제일 나중의 입력 전의 입력들은 전부 clear됨
  return (...args) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }

}

const debounceInput = document.querySelector("#debounce-input")

let i = 0;

debounceInput.addEventListener('keyup', debounce(() => { i += 1; console.log(i) }, 1000))

 

throttle

 

throttle은 무한스크롤과 scroll 이벤트를 다룰때 주로 이용합니다.

스크롤 시마다 일정한 간격을 두고 콜백함수를 실행시킬수 있습니다.

무한 스크롤시에는 intersectionObserver webApi와 같은것들을 이용할 수도 있습니다.

const throttle = (func, delay) => {
  let timer = null;
  // 클로저를 이용 timer를 제어
  // timer가 null일 때만 setTimeout 실행
  // setTimeout내에서 콜백 실행후 timer null로 변환해줌
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
};

const throttleInput = document.querySelector("#throttle-input");
let j = 0;
throttleInput.addEventListener("keyup", 
  throttle(() => { j += 1; console.log(j) }, 1000)
);

 

위의 예시에 나온 코드들은 간략한 동작을 확인하기 위해 작성한 코드로 실제 사용시에는 적합하지 않을수 있습니다.

실제 사용시에는 underScore나 lodash의 debounce, throttle 메소드를 사용하는것을 추천합니다.

 

​