Throttle decorator

지속적 또는 불특정 짧은 간격으로 이벤트가 발생할때 모든 이벤트를 처리하지 않고 시작이벤트부터 정해진 밀리초간격으로 필요작업(함수호출)을 수행하는 방식

이벤트가 발생하면 무조건 정해진 시간간격으로 필요작업 수행하고 수행후 이벤트가 발생하지 않으면 필요작업을 수행하지 않는다.

예) 웹페이지 스크롤이동

마우스 스크롤시 모든 스크롤이벤트를 처리하려면 부하가 많기 때문에 100밀리초간격으로 이벤트정보를 이용하여 결과를 출력한다.

function throttle(func, ms) {
   let isThrottled = false, // 스트틀링이 진행중임을 확인하는 변수
      savedArgs, // 스크롤이 시작되면 스로틀링이 시작되고 멈추면 스롤틀링도 멈추도록 하기위한 변수
      savedThis; // this 저장변수

   function wrapper() {
      if (isThrottled) {
         // 스로틀링 시간간경이내에 이벤트가 발생하면 무시한다.
         savedArgs = arguments; // 이벤트가 발생중임을 알려준다. 밑에서 이변수를 보고 setTimeout를 호출한다.
         savedThis = this;
         return;
      }

      // isThrottled 가 false인 경우
      func.apply(this, arguments); // 스로틀링 시간간격이 되면 필요작업을 호출한다.

      isThrottled = true; // 작업을 호출했으므로 이벤트를 무시하기위해 설정변경한다.

      // ms밀리초후에 스크롤정보를 사용하여 업데이트하기위해 호출한다.
      setTimeout(function () {
         isThrottled = false; // ms밀리초가 지났으므로 변경해야 업데이트한다.
         if (savedArgs) { // 스크롤이벤트가 발생중임을 판단하는 변수 
            wrapper.apply(savedThis, savedArgs); // 저장되어있는 정보를 매개변수로 사용한다.
            savedArgs = savedThis = null; // null처리해야 이벤트가 없을때 더이상 업데이트하지 않는다
            // 만약 이것이 없다면 이시점에서 이벤트가 발생하지 않는다면 무한 반복호출될 것이다.
         }
      }, ms);
   }

   return wrapper;
}

let div = document.querySelector('div') as HTMLDivElement;

function divEvent(ev){
  console.log(ev.clientX, ev.clientY);
}

div.addEventListener('mousemove',throttle(divEvent,350));