[Javascript] Debounce, Throttle 차이

해피몬·2023년 3월 28일

디바운스(Debounce)

정의

이벤트가 여러 번 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나기 전까지는 콜백 함수가 실행되지 않도록 하는 방법입니다.

예시

검색 입력 시 매번 API 요청을 보내는 대신, 사용자가 입력을 멈춘 후 일정 시간(예: 300ms)이 지나야 실제 요청을 보내도록 할 때 유용합니다.

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

// 사용 예: 입력 필드의 변화가 멈춘 후 300ms 뒤에 검색 함수 실행
const searchInput = document.getElementById('search');
const handleSearch = debounce(() => {
  console.log('Search executed');
}, 300);

searchInput.addEventListener('input', handleSearch);

사용자가 입력할 때마다 handleSearch 함수가 호출되지만, 타이머가 초기화되면서 입력이 멈춘 후 300ms 뒤에 한 번만 함수가 실행됩니다.

스로틀(Throttle)

정의

일정 시간 간격으로 이벤트 핸들러가 실행되도록 하는 방법입니다. 즉, 일정 시간 동안 이벤트가 몇 번 발생하더라도 콜백 함수는 지정된 간격에 따라 한 번만 실행됩니다.

사용 예

스크롤 이벤트나 리사이즈 이벤트와 같이 빠르게 연속해서 발생하는 이벤트를 제한된 횟수로 실행하고 싶을 때 사용합니다.

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

// 사용 예: 스크롤 이벤트를 200ms마다 한 번씩 실행
const handleScroll = throttle(() => {
  console.log('Scroll event executed');
}, 200);

window.addEventListener('scroll', handleScroll);