Framework
Version
Debouncer API Referenz
Throttler API Referenz
Rate Limiter API Referenz
Queue API Referenz
Batcher API Referenz

createThrottledSignal

Funktion: createThrottledSignal()

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

Definiert in: throttler/createThrottledSignal.ts:72

Ein Solid-Hook, der einen gedrosselten Zustands-Wert erstellt, der sich höchstens einmal innerhalb eines festgelegten Zeitfensters aktualisiert. Dieser Hook kombiniert Solid's createSignal mit Drosselungsfunktionalität, um kontrollierte Zustandsaktualisierungen bereitzustellen.

Die Drosselung stellt sicher, dass Zustandsaktualisierungen mit einer kontrollierten Rate erfolgen, unabhängig davon, wie oft der Setter aufgerufen wird. Dies ist nützlich für die Ratenbegrenzung von teuren Neudarstellungen oder Operationen, die von sich schnell ändernden Zuständen abhängen.

Der Hook gibt ein Tupel zurück, das enthält

  • Der Zugriffsgeber für den gedrosselten Zustands-Wert
  • Eine gedrosselte Setter-Funktion, die die konfigurierte Wartezeit berücksichtigt
  • Die Throttler-Instanz für zusätzliche Kontrolle

Für direktere Kontrolle über die Drosselung ohne Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook createThrottler in Betracht ziehen.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktive Zustandsverwaltung über die zugrunde liegende Throttler-Instanz. Der Parameter selector ermöglicht es Ihnen, festzulegen, welche Throttler-Zustandsänderungen reaktive Aktualisierungen auslösen, was die Leistung optimiert, indem unnötige Abonnements verhindert werden, wenn irrelevante Zustandsänderungen auftreten.

Standardmäßig werden keine reaktiven Zustandsabonnements durchgeführt. Sie müssen die Zustandsverfolgung durch Angabe einer Selector-Funktion aktivieren. Dies verhindert unnötige reaktive Updates und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente Zustandsänderungen abonniert. Nur wenn Sie einen Selector angeben, verfolgt das reaktive System die ausgewählten Zustandswerte.

Verfügbare Throttler-Zustandseigenschaften

  • canLeadingExecute: Ob der Throttler am Anfang ausführen kann
  • canTrailingExecute: Ob der Throttler am Ende ausführen kann
  • executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
  • isPending: Ob der Throttler auf das Timeout wartet, um die nachfolgende Ausführung auszulösen
  • lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
  • lastExecutionTime: Unix-Zeitstempel der letzten Ausführung
  • nextExecutionTime: Unix-Zeitstempel der nächsten zulässigen Ausführung
  • status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')

Typparameter

TValue

TSelected = {}

Parameter

value

TValue

initialOptions

ThrottlerOptions<Setter<TValue>>

selector?

(state) => TSelected

Gibt zurück

[Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<TValue>, TSelected>]

Beispiel

tsx
// 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);
// 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);
Unsere Partner
Code Rabbit
Unkey
Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.

Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.