본문으로 건너뛰기

함수: createThrottledSignal()

function createThrottledSignal<TValue, TSelected>(
   value, 
   initialOptions, 
   selector?): [Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<TValue>, TSelected>];

정의 위치: solid-pacer/src/throttler/createThrottledSignal.ts:69

지정된 시간 창 안에서 최대 한 번 업데이트되는 스로틀 상태 값을 생성하는 Solid 훅입니다. 이 훅은 Solid의 createSignal과 스로틀 기능을 결합하여 제어된 상태 업데이트를 제공합니다.

스로틀은 setter 호출 빈도와 관계없이 상태 업데이트가 제어된 속도로 발생하도록 합니다. 빠르게 변경되는 상태에 의존하는 비용이 큰 업데이트나 작업의 속도를 제한할 때 유용합니다.

훅은 다음 요소를 담은 튜플을 반환합니다.

  • 스로틀 상태 값 접근자
  • 구성된 대기 시간을 준수하는 스로틀 setter 함수
  • 추가 제어를 위한 스로틀러 인스턴스

상태 관리 없이 스로틀을 더 직접 제어하려면 대신 저수준 createThrottler 훅 사용을 고려합니다.

상태 관리와 셀렉터​

훅은 내부 스로틀러 인스턴스를 통해 반응형 상태 관리에 TanStack Store를 사용합니다. selector 매개변수로 어떤 스로틀러 상태 변경이 반응형 업데이트를 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 구독을 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 셀렉터 함수를 제공해 명시적으로 활성화해야 합니다. 이를 통해 불필요한 반응형 업데이트를 방지하고 컴포넌트가 상태 변경을 구독할 시점을 완전히 제어할 수 있습니다. 셀렉터를 제공한 경우에만 반응형 시스템이 선택된 상태 값을 추적합니다.

사용할 수 있는 스로틀러 상태 속성은 다음과 같습니다.

  • canLeadingExecute: 스로틀러가 선행 에지에서 실행될 수 있는지 여부
  • canTrailingExecute: 스로틀러가 후행 에지에서 실행될 수 있는지 여부
  • executionCount: 완료된 함수 실행 횟수
  • isPending: 스로틀러가 후행 실행을 트리거할 타임아웃을 기다리는지 여부
  • lastArgs: 가장 최근 maybeExecute 호출에 전달된 인수
  • lastExecutionTime: 마지막 실행의 Unix 타임스탬프
  • nextExecutionTime: 다음 허용 실행의 Unix 타임스탬프
  • status: 현재 실행 상태('disabled' | 'idle' | 'pending')

타입 매개변수​

TValue​

TValue

TSelected​

TSelected = { }

매개변수​

value​

TValue

initialOptions​

SolidThrottlerOptions&lt;Setter&lt;TValue>, TSelected>

selector?​

(state) => TSelected

반환값​

[Accessor&lt;TValue>, Setter&lt;TValue>, SolidThrottler&lt;Setter&lt;TValue>, TSelected>]

예시​

// Default behavior - no reactive state subscriptions
const [value, setValue, throttler] = createThrottledSignal(0, { wait: 1000 });

// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [value, setValue, throttler] = createThrottledSignal(
  0,
  { wait: 1000 },
  (state) => ({ isPending: state.isPending })
);

// With custom leading/trailing behavior
const [value, setValue] = createThrottledSignal(0, {
  wait: 1000,
  leading: true,   // Update immediately on first change
  trailing: false  // Skip trailing edge updates
});

// Access throttler state via signals
console.log('Executions:', throttler.state().executionCount);
console.log('Is pending:', throttler.state().isPending);
console.log('Last execution:', throttler.state().lastExecutionTime);
console.log('Next execution:', throttler.state().nextExecutionTime);