포트폴리오 프로젝트에서 커서를 따라다니는 요소를 두 개 만들었다.

그리고 이 요소가 특정 구역에 들어갈 때마다 다른 모습을 보여주기 위해 mousemove 이벤트를 특정 구역마다 적용했다.

문제점

그런데 콘솔 로그를 통해 mousemove 이벤트가 너무 자주 호출된다는 것을 발견했다.

너무 많은 이벤트 발생.

사실 현재시점에서 화면이 느려지거나 하지는 않았지만, 만약 이벤트가 무거운 연산을 하게된다면 상당한 성능저하로 이어졌을 것이다.

게다가 이 정도까지 자주 이벤트가 발생할 필요는 없었기에, mousemove 이벤트의 호출 주기를 제어하기 위해 쓰로틀(throttle)을 도입하기로 했다.

잠깐! 쓰로틀 간단 상식

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/ba8692bd-7a88-47bf-bba0-731466f7ace5/edb0f9c2-b431-4d5e-908b-502031d29417/이동진_흠터.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/ba8692bd-7a88-47bf-bba0-731466f7ace5/edb0f9c2-b431-4d5e-908b-502031d29417/이동진_흠터.png" width="40px" /> 쓰로틀링은 특정 시간 간격 동안 이벤트가 한 번만 실행되도록 제한하는 기술이다.

</aside>

짧은 시간에 반복적으로 발생하는 이벤트 (예: 스크롤, 마우스 이동)의 호출 빈도를 줄여 성능 저하를 방지하는 데 효과적이며,

이벤트 처리에 필요한 CPU 시간과 리소스를 절약할 수 있다.

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}