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
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.
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
• TValue
• TSelected = {}
Accessor<TValue>
ThrottlerOptions<Setter<TValue>>
(state) => TSelected
[Accessor<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
// 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
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.