혼란한 디바운스(debounce)와 스로틀(throttle) 차이

제이밍·2022년 1월 26일

JavaScript debounce throttle

디바운스(debounce)와 스로틀(throttle) 이 글을 마지막으로 더이상 헷갈리지 말자

디바운스와 스로틀이 필요한 이유? 연속해서 호출되는 이벤트 핸들러들 때문!

scroll, resize, input, mousemove 와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다.

이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다.

디바운스, 스로틀 직접 동작 시켰을 경우 차이를 알아보자

버튼을 짧은 간격으로 여러번 클릭했을 때 일반적인 이벤트 핸들러와 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도가 어떻게 다른지 확인해보자

const debounce = (callback, delay) =>{
  let timeId;
  return event => {
    if(timeId) clearTimeout(timerId)
    timerId = setTimeout(callback, delay, event);
  };
};

const throttle = (callback, delay) =>{
  let timeId;
  return event => {
    if(timeId) return;
    timerId = setTimeout(()=>{
      callback(event);
      timeId = null;
    }, delay, event);
  };
};

button.addEventListener('click', debounce(() =>{...},500)
button.addEventListener('click', throttle(() =>{...},500)

일반적인 debounce, throttle 핸들러를 사용한 호출 빈도를 비교하면
일반클릭이 20번인 경우 debounce는 1회, throttle은 6회 호출 되는 걸 확인 할 수 있다.

디바운스(debounce)

이미지참고 - 자바스크립트 딥다이브

짧은 간격으로 연속된 이벤트가 발생하면 이밴트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후 한 번만 호출합니다.

사용

일정 시간 동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출되는 디바운스는 resize 이벤트나 input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성, 버튼 중복 클릭 방지 처리에 유용하기 쓰입니다.

스로틀(throttle)

이미지참고 - 자바스크립트 딥다이브

짧은 간격으로 이벤트가 연속으로 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 합니다.

예를 들어, scoll 이벤트가 짧은 시간 간격으로 연속해서 발생하는 경우를 보자
scroll 이벤트의 경우 사용자가 스크롤할 때 짧은 간격으로 연속해서 발생합니다, 연속해서 발생하는 이벤트의 과도한 핸들로 호출을 방지하기 위해 throttle 함수는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출 되도록 호출 주기를 만듭니다.