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

createThrottledValue

Funktion: createThrottledValue()

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

Definiert in: throttler/createThrottledValue.ts:69

Ein High-Level Solid Hook, der eine gedrosselte Version eines Wertes erstellt, die sich höchstens einmal innerhalb eines angegebenen Zeitfensters aktualisiert. Dieser Hook verwendet intern Solid's createSignal zur Verwaltung des gedrosselten Zustands.

Drosselung stellt sicher, dass die Wertaktualisierungen zu einer kontrollierten Rate erfolgen, unabhängig davon, wie häufig sich der Eingabewert ändert. Dies ist nützlich zur Ratenbegrenzung von teuren Neu-Renderings oder API-Aufrufen, die von sich schnell ändernden Werten abhängen.

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

  • Eine Getter-Funktion, die den gedrosselten Wert bereitstellt
  • Die Drosselungsinanz mit Steuerungsfunktionen

Der gedrosselte Wert wird entsprechend dem in den Optionen angegebenen Leading/Trailing-Edge-Verhalten aktualisiert.

Für eine direktere Kontrolle über das Drosselungsverhalten ohne Solid-Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook createThrottler in Betracht ziehen.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store zur reaktiven Zustandsverwaltung über die zugrunde liegende Drosselungsinanz. Der Parameter selector ermöglicht es Ihnen, anzugeben, welche Zustandsänderungen der Drosselung reaktive Aktualisierungen auslösen, wodurch die Leistung optimiert wird, indem unnötige Abonnements bei irrelevanten Zustandsänderungen verhindert werden.

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 die Drosselung auf das Auslösen der nachfolgenden Ausführung wartet
  • lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
  • lastExecutionTime: Unix-Zeitstempel der letzten Ausführung
  • nextExecutionTime: Unix-Zeitstempel der nächsten erlaubten Ausführung
  • status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')

Typparameter

TValue

TSelected = {}

Parameter

value

Accessor<TValue>

initialOptions

ThrottlerOptions<Setter<TValue>>

selector?

(state) => TSelected

Gibt zurück

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

Beispiel

tsx
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = createThrottledValue(rawValue, { wait: 1000 });

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

// Use the throttled value
console.log(throttledValue()); // Access the current throttled value

// Access throttler state via signals
console.log('Is pending:', throttler.state().isPending);

// Control the throttler
throttler.cancel(); // Cancel any pending updates
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = createThrottledValue(rawValue, { wait: 1000 });

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

// Use the throttled value
console.log(throttledValue()); // Access the current throttled value

// Access throttler state via signals
console.log('Is pending:', throttler.state().isPending);

// Control the throttler
throttler.cancel(); // Cancel any pending updates
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.