JS - 쓰로틀링

쓰로틀링

---

쓰로틀링에 대해 예제를 구현한다.

쓰로틀링과 디바운싱기법이 있는데 사용하는 이유는 이벤트가 중복되서 호출되지 않도록 함이다.

쓰로틀링은 주로 스크롤 이벤트에서 적용되는데, 스크롤도 스크롤 내리면 딱 한번 이벤트가 들어가는 것이 아니라 수십 수천번까지 이벤트가 발생한다.

마지막 호출 이후에 특정 시간동안 다음 이벤트가 호출되지 않도록 하는 것이 쓰로틀링이다.

예제

var timer;
document.querySelector('#input').addEventListener('input', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log('여기에 ajax 요청', e.target.value);
    }, 200);
  }
});

입력이 발생할 때마다 이벤트가 수행되는데 if를 걸어서 200ms마다 수행되도록 적용한 예제이다.

첫 이벤트 발생시 setTimeout이 200ms 후에 실행되므로 200ms안에 수행되는 이벤트들은 if안에 들어오지 못한다.

200ms가 지난 후에 timer가 Null이 되어 그 뒤의 작업을 수행하도록 한다.

한마디로 200ms(특정시간)마다 이벤트 수행을 하도록 한 것이 쓰로틀링이다.