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
Für direktere Kontrolle über die Drosselung ohne Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook createThrottler in Betracht ziehen.
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
• TValue
• TSelected = {}
TValue
ThrottlerOptions<Setter<TValue>>
(state) => TSelected
[Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<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);
// 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);
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.