[JS] 디바운싱과 쓰로틀링(2): 쓰로틀링(throttling)의 이해와 적용

 

목차

 

1. 쓰로틀링?

쓰로틀링(throttling)은 컴퓨터 프로그래밍에서 사용되는 최적화 기법으로, 일정 시간 간격으로 함수의 실행 횟수를 제한하는 프로세스를 말한다. 주로 연속적으로 발생하는 이벤트의 처리 빈도를 조절하는 데 사용되며, 시스템 자원을 효율적으로 관리하는 데 효과적이다.

 

2. 어원

"쓰로틀(throttle)"이라는 용어는 원래 기계 공학 분야에서 유래했다. 엔진의 연료 공급을 조절하는 장치를 의미하는 것으로, 엔진 출력을 제어하는 역할을 했다. 소프트웨어 엔지니어링에서는 이 개념을 차용하여 함수 호출이나 이벤트 처리의 빈도를 "조절"하는 기술을 지칭하게 되었다.

 

3. 작동 원리

쓰로틀링의 기본 원리는 다음과 같다:

1. 함수 호출 시 마지막 실행 시간 확인.
2. 현재 시간과 마지막 실행 시간의 차이가 설정된 간격보다 작음 => 함수 실행 X
3. 현재 시간과 마지막 실행 시간의 차이가 설정된 간격보다 큼 => 함수 실행 & 마지막 실행 시간 업데이트

이를 통해 연속적으로 발생하는 이벤트들 중 일정 간격으로 이벤트를 처리하게 된다.

 

4. 응용 분야

쓰로틀링은 다양한 상황에서 유용하게 사용된다:

• 스크롤 이벤트 처리: 무한 스크롤 구현 시 스크롤 위치를 체크하는 빈도를 조절한다.
• 실시간 게임: 서버로 플레이어의 위치 정보를 보내는 빈도를 제한한다.
• API 요청 제한: 서버에 과도한 요청을 보내는 것을 방지한다.

 

5. 구현 예시

JavaScript에서의 간단한 쓰로틀 함수 구현:

<div id="scrollArea" style="height: 200px; overflow-y: scroll;">
  <p>스크롤 영역입니다. 아래로 스크롤해보세요.</p>
<!-- 스크롤을 위한 더미 콘텐츠 -->
  <p style="height: 1000px;"></p>
</div>

<script>
const throttle = (func, limit) => {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

document.getElementById('scrollArea').addEventListener(
  'scroll',
  throttle(event => console.log('Scroll event throttled'), 1000)
);
</script>

 

 

 

 

예시화면: 반복적인 스크롤 이벤트 발생에도 지정된 시간(1초)에 한 번씩만 함수를 수행하는 모습

 

 

6. 기억하기

디바운싱: 이벤트가 잠잠해지면 함수 실행

쓰로틀링: 지정시간에 한 번씩만 함수 실행