Funktion: createDebouncer()

function createDebouncer<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidDebouncer<TFn, TSelected>

function createDebouncer<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidDebouncer<TFn, TSelected>

Definiert in: debouncer/createDebouncer.ts:103

Ein Solid Hook, der eine Debouncer-Instanz erstellt und verwaltet.

Dies ist ein Low-Level-Hook, der direkten Zugriff auf die Funktionalität des Debouncers ohne integriertes State Management bietet. Dies ermöglicht Ihnen die Integration mit jeder beliebigen State-Management-Lösung (createSignal, Redux, Zustand usw.).

Dieser Hook bietet Debouncing-Funktionalität, um die Häufigkeit, mit der eine Funktion aufgerufen werden kann, zu begrenzen und vor der Ausführung des neuesten Aufrufs eine bestimmte Verzögerung abzuwarten. Dies ist nützlich für die Handhabung häufiger Ereignisse wie Fenstergrößenänderungen, Scroll-Ereignisse oder Echtzeit-Suchfelder.

Der Debouncer führt die Funktion erst aus, nachdem die angegebene Wartezeit seit dem letzten Aufruf abgelaufen ist. Wenn die Funktion vor Ablauf der Wartezeit erneut aufgerufen wird, wird der Timer zurückgesetzt und beginnt erneut zu warten.

Zustandsverwaltung und Selektor

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
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')

// Default behavior - no reactive state subscriptions
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to re-render when isPending changes (optimized for loading states)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - re-render when any of these change
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  debouncer.maybeExecute(e.target.value);
};

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

// Default behavior - no reactive state subscriptions
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to re-render when isPending changes (optimized for loading states)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - re-render when any of these change
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  debouncer.maybeExecute(e.target.value);
};

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

createDebouncer

Funktion: createDebouncer()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

initialOptions

selector

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren