시스매

쓰로틀링

3 min read

2025-11-01 15:12

Tags: 웹

쓰로틀링 (Throttling)

  • 쓰로틀링은 과도한 요청이 시스템에 부담을 주는 것을 막기 위해 이벤트 발생 횟수를 제한하는 기술이다.
  • 주로 무한 스크롤, 자동 완성 검색, API 요청 수 제한 등 성능 최적화가 필요한 곳에 사용된다.
  • 핵심 원리는 ‘시간’과 ‘타이머’를 이용한 제어
let throttleTimer;
 
const throttle = (callback, time) => {
  if (throttleTimer) return;
  throttleTimer = setTimeout(() => {
    callback();
    throttleTimer = null;
  }, time);
};
  1. throttleTimer라는 변수를 사용하여 타이머의 상태를 추적한다.
  2. throttle 함수가 호출되면, 먼저 throttleTimer가 실행 중인지 확인한다.
  3. 만약 throttleTimer가 실행 중이라면(즉, 이전에 호출된 이벤트가 아직 처리 대기 중이라면), 현재의 이벤트 호출은 무시하고 함수를 종료한다.
  4. throttleTimer가 실행 중이 아니라면, setTimeout 함수를 사용하여 새로운 타이머를 설정한다.
  5. 설정된 time(지연 시간)이 지나면, callback 함수(실제로 실행하고자 하는 로직)를 실행하고, throttleTimer를 null로 초기화하여 다음 이벤트가 호출될 수 있도록 준비한다.
구분쓰로틀링 (Throttling)디바운싱 (Debouncing)
개념일정 시간 간격으로 최대 한 번만 함수를 실행한다.연이어 발생하는 이벤트를 그룹화하여 마지막 이벤트만 한 번 실행한다.
비유놀이기구 안전요원 (일정 시간마다 입장)엘리베이터 닫힘 버튼 (마지막 사람이 타고 나서 문이 닫힘)
주요 목적실행 횟수를 줄이는 데 초점불필요한 실행을 막는 데 초점
사용 사례무한 스크롤, API 요청 수 제한검색어 자동 완성, 버튼 중복 클릭 방지

그래프 뷰

백링크