debounce VS throttle

debounce

동일한 이벤트가 여러번 반복적으로 발생했을 때 가장 최근에 발생한 이벤트만 처리하는 방법

예를 들어 debounce 에 시간을 1초로 설정하고 이벤트를 0.5초간격으로 100번 발생시킬 경우 이벤트 사이 시간이 1초보다 작기 때문에 마지막 100번째 이벤트만 처리하게 된다.

const debounce = (func, wait = 300) => {
  let timeout;
// debounce 는 함수 호출 할 때마다 timer 초기화
  return (...args) => {
		// closure 를 이용, 외부함수 변수 정보를 가지고 조작함
		// 기존에 queue 에 등록된 timer 제거
    clearTimeout(timeout);
		// 새로운 timer 설정  
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
};

throttle

동일한 이벤트가 여러번 반복적으로 발생했을 때 설정한 시간 마다 이벤트를 처리하는 방법

예를 들어 throttle 에 시간을 1초로 설정하고 이벤트를 0.5초간격으로 100번 발생시킬 경우 설정한 시간인 1초마다 이벤트를 처리해서 약 50번 이벤트를 처리하게 된다.

function throttle(func, delay = 300) {
  let timer;
  return () => {
// 설정된 timer 가 없으면 새로 등록 
    if (!timer) {
// 제한시간이 끝나면 timer 새로 만듦
// throttle 는 특정시간 마다 timer 초기화
      timer = setTimeout(() => {
        timer = null;
        func(...args);
      }, delay);
    }
  };
}

참고

Debounce – How to Delay a Function in JavaScript (JS ES6 Example) (freecodecamp.org)

[Javascript] Debounce & Throttle (tistory.com)