쓰로틀링(throttling)

자바스크립트에서의 쓰로틀링은 짧은 시간 내에 과도한 이벤트 실행으로 인해 발생하는 성능 저하를 막기 위해 일정한 time slice를 주기로 이벤트가 한 번만 실행되도록 제한한다.

 

예를 들어, 1초에 100번의 업데이트가 일어나는 DOM 요소에 이벤트 핸들러를 추가한다면, 이벤트는 1초에 100번이나 실행되므로 성능에 무리를 줄 수 있다.

 

쓰로틀링을 적용하게 되면 불필요한 이벤트 실행 횟수를 줄일 수 있어 성능을 항샹시킬 수 있다.

 

쓰로틀링을 적용하면 좋은 예시로는 scroll, resize, drag, mouse 이벤트, 애니메이션 등이 있다.

 

예를 들어, 스크롤 이벤트의 경우, 크롬 기준 2px 단위로 이벤트가 발생하게 된다.

 

사용자가 1초에 1000px의 스크롤을 하게되는 경우에는 약 500번의 이벤트가 발생되므로 성능에 좋지 않을 수 있다.

 

이러한 경우에 time = 100 간격으로 이벤트가 실행되도록 쓰로틀링을 적용하면 실행 횟수를 10번으로 줄일 수 있다.

 

쓰로틀링을 코드로 표현하면 다음과 같다.

 

const DELAY = 500;
const handleScroll = () => {
  timer = null;
  console.log('스크롤!');
}
        
let timer;  
   
window.addEventListener('scroll', () => {
  if (!timer) timer = setTimeout(handleScroll, DELAY);
});

 

쓰로틀링도 디바운싱과 마찬가지로 setTimeout 함수와 time(기준시간)이 필요하다.

 

이벤트가 발생했을 때, timer 변수의 값이 비어있다면 콜백함수를 반환하는 setTimeout 함수를 값으로 할당한다.

 

그리고 콜백 함수 내에서는 timer를 null 값으로 초기화 해준다.

 

이러한 방법으로 time 이내에 최대 1번의 콜백 함수만 실행하도록 보장하게 된다.