Throttling과 Debouncing

Throttling

• 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않게하는 프로그래밍 기법

let throttlingTimer;
const throttle = () => {
  if(!throttlingTimer){
      throttlingTimer = setTimeout(() => {
        throttlingTimer = null;
      	console.log("요청")
      }, 200);
  }
}
throttle(); // debouncingTimer 생성하고 0.2초후에 출력함
throttle(); // debouncingTimer 가 있어서 출력 안함
throttle(); // debouncingTimer 전의 timer가 출력했으면 0.2초후에 출력함

Debouncing

• 계속해서 호출되는 함수들 중 마지막 함수만 호출하도록 하는 프로그래밍 기법

let debouncingTimer;
const debounce = () => {
  if(debouncingTimer){
  	clearTimeout(debouncingTimer);
  }
  debouncingTimer = setTimeout(() => console.log("요청"), 1000);
}
debounce(); // debouncingTimer 생성
debounce(); // debouncingTimer 제거 및 재생성
debounce(); // 로그 출력