함수: throttle()

function throttle<TFn>(fn, initialOptions): (...args) => void;

정의 위치: throttler.ts:374

제공된 함수의 실행 빈도를 제한하는 스로틀 함수를 생성합니다.

이 동기 버전은 더 가벼워 대부분의 경우 충분합니다. 프로미스, 재시도 지원, 중단/취소 기능 또는 고급 오류 처리가 필요하면 asyncThrottle로 전환합니다.

스로틀링은 호출 횟수와 관계없이 지정된 시간 윈도우 안에서 함수가 최대 한 번만 실행되도록 합니다. 비용이 큰 작업이나 UI 업데이트의 요청률을 제한할 때 유용합니다.

옵션을 통해 스로틀 윈도우의 선행 및/또는 후행 에지에서 스로틀 함수가 실행되도록 설정할 수 있습니다.

이벤트 버스트를 처리하려면 debounce() 사용을 고려합니다. 실행 횟수를 엄격히 제한하려면 rateLimit() 사용을 고려합니다.

상태 관리:

• 반응형 상태 관리에 TanStack Store를 사용합니다.
• 스로틀러 생성 시 initialState로 초기 상태 값을 제공합니다.
• onExecute 콜백으로 함수 실행에 반응하고 사용자 지정 로직을 구현합니다.
• 상태에는 실행 횟수, 마지막 실행 시간, 대기 상태 등이 포함됩니다.
• 내부 Throttler 인스턴스의 store.state 속성으로 상태에 접근할 수 있습니다.
• 프레임워크 어댑터(React/Solid)를 사용할 때는 훅의 state 속성에서 상태에 접근합니다.

타입 매개변수

TFn

TFn extends AnyFunction

매개변수

fn

TFn

initialOptions

ThrottlerOptions<TFn>

반환값

(...args): void;

스로틀 함수 실행을 시도합니다. 실행 동작은 스로틀러 옵션에 따라 달라집니다.

• 마지막 실행 후 충분한 시간이 지난 경우(>= 대기 시간):

  • leading=true: 즉시 실행합니다.
  • leading=false: 다음 후행 실행을 기다립니다.

• 대기 시간 안인 경우:

  • trailing=true: 대기 시간이 끝날 때 실행하도록 예약합니다.
  • trailing=false: 실행을 버립니다.

매개변수

args

...Parameters<TFn>

반환값

void

예시

const throttled = new Throttler(fn, { wait: 1000 });

// First call executes immediately
throttled.maybeExecute('a', 'b');

// Call during wait period - gets throttled
throttled.maybeExecute('c', 'd');

예시

// Basic throttling - max once per second
const throttled = throttle(updateUI, { wait: 1000 });

// Configure leading/trailing execution
const throttled = throttle(saveData, {
  wait: 2000,
  leading: true,  // Execute immediately on first call
  trailing: true  // Execute again after delay if called during wait
});