function createDebouncedValue<TValue, TSelected>(
   value, 
   initialOptions, 
   selector?): [Accessor<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]

function createDebouncedValue<TValue, TSelected>(
   value, 
   initialOptions, 
   selector?): [Accessor<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]

Definiert in: debouncer/createDebouncedValue.ts:72

Ein Solid-Hook, das einen verzögerten Wert erstellt, der sich erst nach einer angegebenen Verzögerung aktualisiert. Im Gegensatz zu createDebouncedSignal verfolgt dieser Hook automatisch Änderungen am Eingabewert und aktualisiert den verzögerten Wert entsprechend.

Der verzögerte Wert wird erst aktualisiert, nachdem die angegebene Wartezeit seit der letzten Änderung des Eingabewerts abgelaufen ist. Wenn sich der Eingabewert erneut ändert, bevor die Wartezeit abgelaufen ist, wird der Timer zurückgesetzt und beginnt erneut zu warten.

Dies ist nützlich für die Ableitung verzögerter Werte aus häufig wechselnden Props oder Zuständen, wie z. B. Suchanfragen oder Formulareingaben, bei denen Sie begrenzen möchten, wie oft nachgelagerte Effekte oder Berechnungen stattfinden.

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

• Ein Accessor, der den aktuellen verzögerten Wert bereitstellt
• Die Debouncer-Instanz mit Steuerungsfunktionen

Der Hook verwendet TanStack Store für die reaktive Zustandsverwaltung über die zugrunde liegende Debouncer-Instanz. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen des Debouncers 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 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')

• TValue

• TSelected = {}

Accessor<TValue>

DebouncerOptions<Setter<TValue>>

(state) => TSelected

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

// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = createSignal('');
const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
  wait: 500 // Wait 500ms after last change
});

// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = createDebouncedValue(
  searchQuery,
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// debouncedQuery will update 500ms after searchQuery stops changing
createEffect(() => {
  fetchSearchResults(debouncedQuery());
});

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

// Control the debouncer
debouncer.cancel(); // Cancel any pending updates

// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = createSignal('');
const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
  wait: 500 // Wait 500ms after last change
});

// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = createDebouncedValue(
  searchQuery,
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// debouncedQuery will update 500ms after searchQuery stops changing
createEffect(() => {
  fetchSearchResults(debouncedQuery());
});

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

// Control the debouncer
debouncer.cancel(); // Cancel any pending updates