EventListener에 throttling 적용

특정 작업이 과도하게 반복되면 문제가 발생할 수 있다. 대표적으로 addEventListener("scroll", ...)과 같이 스크롤 이벤트를 탐지하는 경우다. 만약 유저가 심심해서 미친 듯이 스크롤을 올렸다 내렸다 반복한다면 쉬지 않고 등록한 작업을 수행해야 한다. 

throttling은 특정 시간 동안 작업이 반복되지 않도록 막아준다. 

아래 블록을 스크롤 해보면 어떤 차이가 있는지 바로 알 수 있다. 

throttling 없음

스크롤이 인식되면,
아래 숫자를
1씩 증가시킨다.
↓

0

throttling 적용

스크롤이 인식되면,
아래 숫자를
1씩 증가시킨다.
↓

0

 

throttling이 적용되면 이벤트가 인식되고서 동작이 바로 실행되지 않고 일정 시간 대기한다. 그리고 대기 시간 동안 발생한 이벤트는 무시된다. 이렇게 하면 동작이 빈번하게 발생하는 문제를 해결할 수 있다.

 

---

Js 구현

let timer;

function throttling(func, ms) {
  if (timer) {
    return;
  }
  timer = setTimeout(() => {
    func();
    timer = undefined;
  }, ms);
}

• throttling 함수를 보면 실행할 동작과 지연시킬 시간을 파라미터로 넘겨준다. 
• 만약 이미 등록된 동작(timer)이 있다면 무시한다.
• 등록된 동작이 없다면 파라미터로 넘겨준 함수를 timer로 등록한다. 실행이 완료된 후, timer는 다시 초기화해준다. 

// throttling 미적용
document.addEventListener("scroll", updateCounter);

// throttling 적용
document.addEventListener("scroll", () => {
  throttling(updateCounter, 100);
});