쓰로틀링, 디바운싱 with JS

계기

무한 스크롤을 구현하던 중, 한가지 문제가 발생합니다.
스크롤 이벤트는 스크롤 하는 동안, 계속 발생하는 이벤트입니다.

때문에, 맨 아래에 도달하면 데이터를 여러번 로드하기도 하고,
로드하는 도중, 다시 맨 아래 도달하여 또 로드하기도 합니다.

그래서, 핸들러의 호출을 조절 시킬 방법이 필요합니다.

쓰로틀링과 디바운싱이라는 프로그래밍 방법이 존재합니다.

쓰로틀링 (Throttling)

조절이라는 의미를 가지며, 노트북이 과열될 때, 손상을 막고자 클럭과 전압을 강제적으로 낮춰 발열을 줄이는 기능을 말하기도 합니다.

실행 횟수를 조절하는 프로그래밍 기법으로,
scroll 이벤트와 같이 많이 발생하는 이벤트를 조절할 때 사용됩니다.

구현

setTimeout을 통해, 실행할 함수를 원하는 딜레이 후에 실행하도록 합니다.
함수가 실행되면, 다시 setTimeout이 설정되도록 하여 호출을 제어합니다.

let timer = null;

window.addEventListener('scroll',()=> {
  if (!timer) {
    timer = setTimeout(()=>{
      timer = null;
      
      console.log('fetch data'); // 제어할 동작
    },300)
  }
})

다음과 같이 활용할 수 있습니다.

export throttle = (func, delay)=> {
  let timer = null;
  
  return (...args)=> {
    if (!timer) {
      timer = setTimeout(()=>{
        timer = null;

        func(...args);
      },delay)
    }
  }
  
}

//use
import { throttle } from './utils/delay.js';

window.addEventListener('scroll', throttle(onScroll,500));

디바운싱 (Debouncing)

디바운싱은 한번에 호출이 여러번 될 때, 마지막 (혹은 처음) 함수만 호출되도록 하는 프로그래밍 기법입니다.

예약이나 결제등 중요한 작업을 여러번 한번에 호출할 때, 제어할 수 있습니다.
ajax를 제어하여 성능 낭비를 막을 수 있습니다.

구현

딜레이되는 동안 호출된다면, 기존 timer를 해제하고 다시 timer를 설정합니다.

let timer = null;

payButton.addEventListener('click',() => {
  if (timer) {
    clearTimeout(timer);
  }
  
  timer = setTimeout(()=> {
	pay(); // 제어할 동작
  },500);
})