function createAsyncDebouncer<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidAsyncDebouncer<TFn, TSelected>

function createAsyncDebouncer<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidAsyncDebouncer<TFn, TSelected>

Definiert in: async-debouncer/createAsyncDebouncer.ts:118

Ein Low-Level Solid Hook, der eine AsyncDebouncer-Instanz erstellt, um die Ausführung einer asynchronen Funktion zu verzögern.

Dieser Hook ist flexibel und zustandsverwaltungsunabhängig konzipiert – er gibt einfach eine Debouncer-Instanz zurück, die Sie in jede Zustandsverwaltungslösung integrieren können (createSignal, etc.).

Asynchrones Debouncing stellt sicher, dass eine asynchrone Funktion erst ausgeführt wird, nachdem eine bestimmte Verzögerung seit ihrer letzten Ausführung verstrichen ist. Jede neue Ausführung setzt den Verzögerungstimer zurück. Dies ist nützlich für die Verarbeitung häufiger Ereignisse wie Fenstergrößenänderungen oder Eingabeänderungen, bei denen Sie den Handler erst ausführen möchten, nachdem die Ereignisse aufgehört haben.

Im Gegensatz zu Throttling, das die Ausführung in regelmäßigen Abständen zulässt, verhindert Debouncing jede Ausführung, bis die Funktion für den angegebenen Verzögerungszeitraum nicht mehr aufgerufen wird.

Im Gegensatz zum nicht-asynchronen Debouncer unterstützt diese asynchrone Version die Rückgabe von Werten aus der debounced-Funktion, was sie ideal für API-Aufrufe und andere asynchrone Operationen macht, bei denen Sie das Ergebnis des maybeExecute-Aufrufs anstelle des Setzens des Ergebnisses in einer Zustandsvariable innerhalb der debounced-Funktion wünschen.

Fehlerbehandlung

• Wenn ein onError-Handler bereitgestellt wird, wird dieser mit dem Fehler und der Debouncer-Instanz aufgerufen.
• Wenn throwOnError auf true gesetzt ist (Standardwert, wenn kein onError-Handler bereitgestellt wird), wird der Fehler ausgelöst.
• Wenn throwOnError auf false gesetzt ist (Standardwert, wenn ein onError-Handler bereitgestellt wird), wird der Fehler "verschluckt".
• Sowohl onError als auch throwOnError können zusammen verwendet werden – der Handler wird aufgerufen, bevor ein Fehler ausgelöst wird.
• Der Fehlerzustand kann über die zugrundeliegende AsyncDebouncer-Instanz überprüft werden.

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, indem unnötige erneute Renderings verhindert werden, wenn irrelevante Zustandsänderungen auftreten.

Standardmäßig erfolgen keine reaktiven Zustands-Subscriptions und Sie müssen das Zustands-Tracking durch Bereitstellen einer Selector-Funktion aktivieren. Dies verhindert unnötige Renderings und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente aktualisiert wird. Nur wenn Sie einen Selector bereitstellen, wird die Komponente neu gerendert, wenn sich die ausgewählten Zustandswerte ändern.

Verfügbare Zustandseigenschaften

• canLeadingExecute: Ob der Debouncer an der führenden Kante ausführen kann
• executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
• hasError: Ob die letzte Ausführung zu einem Fehler geführt hat
• isPending: Ob der Debouncer auf den Timeout wartet, um die Ausführung auszulösen
• isExecuting: Ob die Ausführung einer asynchronen Funktion gerade läuft
• lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
• lastError: Der Fehler der letzten fehlgeschlagenen Ausführung (falls vorhanden)
• lastResult: Das Ergebnis der letzten erfolgreichen Ausführung
• status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending' | 'executing')

• TFn extends AnyAsyncFunction

• TSelected = {}

TFn

AsyncDebouncerOptions<TFn>

(state) => TSelected

SolidAsyncDebouncer<TFn, TSelected>

// Default behavior - no reactive state subscriptions
const { maybeExecute } = createAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// Opt-in to re-render when isPending or isExecuting changes (optimized for loading states)
const debouncer = createAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const debouncer = createAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    return data;
  },
  {
    wait: 300,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  },
  (state) => ({ hasError: state.hasError, lastError: state.lastError })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isPending, isExecuting } = debouncer.state();

// Default behavior - no reactive state subscriptions
const { maybeExecute } = createAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// Opt-in to re-render when isPending or isExecuting changes (optimized for loading states)
const debouncer = createAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const debouncer = createAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    return data;
  },
  {
    wait: 300,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  },
  (state) => ({ hasError: state.hasError, lastError: state.lastError })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isPending, isExecuting } = debouncer.state();