Debounce, Throttle

Debounce, Throttle를 사용하는 이유?

Throttle과 Debounce는 사용자 입력이나 이벤트를 효율적으로 처리하기 위해 사용한다. 두 방법 모두 성능을 향상시키고, 불필요한 작업을 방지하는 데 좋다. 적용 시점과 처리 방식이 좀 다르다.

Throttle

여러 번 발생하는 이벤트를 일정 시간 동안 한 번만 실행

이벤트가 발생하는 빈도를 제한하여, 특정 시간 간격마다 이벤트 핸들러를 실행한다.

예시 코드

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      if (lastFunc) clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll event handler called!');
}, 500));

위 코드는 스크롤 이벤트가 500ms마다 한 번만 처리되도록 한다.

Debounce

여러 번 발생하는 이벤트에서 가장 마지막 이벤트만을 실행

이벤트가 발생한 후 일정 시간 동안 추가 이벤트가 발생하지 않으면 핸들러를 실행한다.

예시 코드 (Debounce):

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  }
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
  console.log('Search input changed:', this.value);
}, 500));

위 코드는 입력이 끝난 후 500ms 동안 추가 입력이 없으면 이벤트 핸들러를 실행하도록 한다.

Throttle, Debounce가 무슨 차이임?

정리하자면, Throttle 와 Debounce 의 차이점은 이벤트를 언제 발생시킬지의 시점 차이이다.

Debounce 는 입력이 끝날 때까지 무한적으로 기다리지만, Throttle 는 입력이 시작되면, 일정 주기로 계속 실행한다.

---

참고 링크: https://pks2974.medium.com/throttle-와-debounce-개념-정리하기-2335a9c426ff

정말 잘 되어있다.