javascript / intermediate
Snippet
Asynchrone Derived Stores mit Debouncing
Derived Stores können asynchron sein. Durch die Verwendung des 'set'-Callbacks können Sie Updates verzögern (Debouncing), was nützlich ist, um übermäßige API-Aufrufe bei schnellen Benutzereingaben zu verhindern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
import { derived } from 'svelte/store';export const debouncedSearch = derived(searchTerm, ($searchTerm, set) => {const timeout = setTimeout(() => {set($searchTerm);}, 300);return () => clearTimeout(timeout);}, '');
svelte
Erklärung
1
derived(searchTerm, ($searchTerm, set) => { ... }, '');
Das dritte Argument ist der Initialwert; das zweite Argument bietet eine 'set'-Funktion für asynchrone Updates.
2
return () => clearTimeout(timeout);
Gibt eine Cleanup-Funktion zurück, die jedes Mal ausgeführt wird, wenn sich der Eingabe-Store ändert, und bricht vorherige Timer ab.