[JavaScript] 디바운스와 쓰로틀의 차이

디바운스(Debounce)와 쓰로틀(Throttle)은 무엇인가?

• JS에서 사용하는 이벤트를 제어하는 방법이다.
• 대표적인 이벤트 예시로는 타이핑, 스크롤링 등에 의해 발생되는 이벤트가 있다.

디바운스와 스로틀을 사용하면 어떤 일이 생기는가?

• 먼저 위에서 말한 이벤트들을 그냥 처리를 할려고 하면, 사용자들이 어떠한 행위들을 할 때 마다 과도한 이벤트 횟수로 인해 서버에 엄청난 부담을 주게된다.
• 이러한 과정을 통해 성능 문제가 발생되어 사용자 경험까지 안 좋아지게 될 것이다.
• 그러면 이벤트를 제어하여 처리량을 조절하면 어떤 효과를 기대할 수 있을까?
  1. 서버에 부담을 줄잀 수 있다.
  2. 사용자 경험을 개선

디바운스 (Debounce)

연속적으로 호출되는 함수들 중 마지막 함수만 호출시킨다.

쓰로틀 (Throttle)

마지막 함수가 호출된 후 일정 시간 안에 재호출되지 않게 하여, 방생될 이벤트들의 양을 조절시킨다

디바운스 구현해보기

const debounce = (func, delay) => {
    let timer = null;

    return () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  };