createDebouncedSignal
Funktion: createDebouncedSignal()
function createDebouncedSignal<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
function createDebouncedSignal<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
Definiert in: debouncer/createDebouncedSignal.ts:81
Ein Solid-Hook, der einen entprellten Zustandswert erstellt und die createSignal-Funktionalität von Solid mit Entprellungsfunktionen kombiniert. Dieser Hook stellt sowohl den aktuellen entprellten Wert als auch Methoden zu dessen Aktualisierung bereit.
Der Zustandswert wird erst aktualisiert, nachdem die angegebene Wartezeit seit dem letzten Aktualisierungsversuch abgelaufen ist. Wenn vor Ablauf der Wartezeit ein weiterer Aktualisierungsversuch unternommen wird, wird der Timer zurückgesetzt und beginnt erneut zu warten. Dies ist nützlich für die Handhabung häufiger Zustandsaktualisierungen, die gedrosselt werden sollen, wie z. B. Such-Eingabewerte oder Fenstergrößen.
Der Hook gibt ein Tupel zurück, das enthält
- Der Zugriff auf den aktuellen entprellten Wert
- Eine Funktion zum Aktualisieren des entprellten Werts
- Die Entprellungsinstanz mit zusätzlichen Steuerungsfunktionen und Zustands-Signalen
Zustandsverwaltung und Selektor
Der Hook verwendet TanStack Store für reaktives Zustandsmanagement über die zugrundeliegende Entprellungsinstanz. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen des Entprellers reaktive Updates auslösen. Dies optimiert die Leistung, 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 Entpreller-Zustandseigenschaften
- canLeadingExecute: Ob der Debouncer an der führenden Kante ausführen kann
- executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
- isPending: Ob der Debouncer auf den Timeout wartet, um die Ausführung auszulösen
- lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
- status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')
Typparameter
• TValue
• TSelected = {}
Parameter
value
TValue
initialOptions
DebouncerOptions<Setter<TValue>>
selector?
(state) => TSelected
Gibt zurück
[Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
Beispiel
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to reactive updates when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Access debouncer state via signals
console.log('Executions:', debouncer.state().executionCount);
console.log('Is pending:', debouncer.state().isPending);
// In onExecute callback, use get* methods
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500,
onExecute: (debouncer) => {
console.log('Total executions:', debouncer.getExecutionCount());
}
});
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to reactive updates when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Access debouncer state via signals
console.log('Executions:', debouncer.state().executionCount);
console.log('Is pending:', debouncer.state().isPending);
// In onExecute callback, use get* methods
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500,
onExecute: (debouncer) => {
console.log('Total executions:', debouncer.getExecutionCount());
}
});
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.