Throttling?

쓰로틀링(Throttling)?

쓰로틀링(Throttling)은 이벤트를 일정한 주기나 제한된 빈도로 실행하도록 제어하는 기술 또는 패턴입니다. 이것은 이벤트의 과도한 호출을 방지하고 리소스 소모를 제한하기 위해 사용됩니다.

특징

성능 최적화
스크롤, 리사이징, 혹은 마우스 이벤트와 같이 빈번하게 발생하는 이벤트의 처리를 제한하여 브라우저의 성능을 향상시킵니다.

서버 요청 제한
API 요청이나 서버 호출을 일정한 속도로 제한하여 서버 부하를 감소시킵니다. 이것은 DDoS 공격으로부터 서버를 보호하는 데도 사용될 수 있습니다.

사용자 경험 향상
사용자 인터페이스에서 버튼 클릭, 드래그 앤 드롭, 혹은 검색 필터와 같이 빈번한 상호작용을 조절하여 사용자 경험을 더 원활하게 만듭니다.

쓰로틀링은 일정한 주기나 지연 시간동안 반복적으로 이벤트를 실행하도록 구현됩니다. 예를 들어, 1초에 한 번 이벤트를 실행하도록 쓰로틀링을 설정하면, 이벤트가 여러 번 발생해도 실제로는 1초마다 한 번만 실행됩니다.
JavaScript에서 쓰로틀링은 setTimeout 또는 setInterval과 같은 타이머 함수를 사용하여 구현될 수 있으며, 주로 이벤트 핸들러 함수 내에서 쓰이게 됩니다. 이렇게 하면 이벤트를 일정한 간격으로 처리할 수 있고, 시스템 자원을 효율적으로 관리할 수 있습니다.

예시

let throttleTimer;
window.addEventListener("scroll", function() {
  if (!throttleTimer) {
    throttleTimer = setTimeout(function() {
      // 스크롤 이벤트 처리 로직을 여기에 작성
      throttleTimer = null;
    }, 200); // 200ms 간격으로 실행
  }
});