[JavaScript] Debounce 와 Throttle 에 대해 알아보자

 

📌 Debounce 와 Throttle 을 이용한 이벤트 처리

debounce 와 throttle 은 과도한 이벤트 발생으로 인한 성능 저하를 방지하는 방법입니다.

이 둘은 일정 시간 간격을 두고 이벤트를 호출한다는 동일한 목표를 가지고 있지만

서로 동작 방식이 다릅니다.

 

📌 Debounce 의 동작 방식과 구현

1️⃣ Debounce 동작 예시

debounce 는 이벤트를 그룹화하여 하나의 이벤트만 호출되도록 합니다.

 

 

위 예시와 같이 debounce 는 일정 waiting time 동안 함수 호출이 없는 경우

가장 마지막 이벤트를 선택합니다. (trailing)

이 대신에 가장 처음 호출된 이벤트를 선택하는 방법도 있습니다. (leading)

2️⃣ Debounce 구현하기

function debounce(callbackFn, timerTick) {
  let timerId = null;

  return (...args) => {
    if (timerId) {
      clearTimeout(timerId);
    }

    timerId = setTimeout(() => {
      callbackFn.apply(this, args);
    }, timerTick);
  };
}

Debounce 동작 확인하기

위에서 구현한 throttle 함수의 동작을 테스트 하기 위해서

다음 코드를 통해 scroll 이벤트에 핸들러를 할당했습니다.

const debouncedEventHandler = debounce(() => console.log("event!"), 2000);

window.addEventListener("scroll", debouncedEventHandler);

 

 

debounce 를 적용한 scroll event handler 예시

 

📌 Throttle 의 동작 방식과 구현

Throttle 동작 예시

Throttle 은 일정 기간동안 연속적인 이벤트가 최대 1번만 실행되게 합니다.

 

 

이벤트가 꾸준히 발생하는 상황에서 일정 time interval 간격으로

이벤트를 처리하고 싶다면 debounce 대신 throttle 을 사용하면 됩니다.

1️⃣ Throttle 구현하기

function throttle(callbackFn, timerTick) {
  let waiting = false;

  return (...args) => {
    if (!waiting) {
      callbackFn.apply(this, args);
      waiting = true;

      setTimeout(() => (waiting = false), timerTick);
    }
  };
}

2️⃣ Throttle 동작 확인하기

동일한 방법으로 throttle 테스트 코드를 scroll 이벤트에 할당해봤습니다.

const throttledEventHandler = throttle(() => console.log("event!"), 2000);

window.addEventListener("scroll", throttledEventHandler);

 

 

throttle 를 적용한 scroll event handler 예시

 

📌 참고 자료

Javascript: Отличие Debounce от Throttling | xandeadx.ru