javascript / expert
Snippet
Reaktive Statusspeicherung mit Signal-Effects und Bereinigung
Die effect()-Funktion bietet einen onCleanup-Callback, der für die Verwaltung von Seiteneffekten essenziell ist. Dieses Snippet zeigt, wie man Persistenzlogik im localStorage 'debounced' und sicherstellt, dass die Bereinigung laufende Timeouts abbricht.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export class PreferencesService {theme = signal<'dark' | 'light'>(localStorage.getItem('theme') as any || 'light');constructor() {effect((onCleanup) => {const currentTheme = this.theme();const timeout = setTimeout(() => {localStorage.setItem('theme', currentTheme);}, 1000);onCleanup(() => clearTimeout(timeout));});}}
angular
Erklärung
1
effect((onCleanup) => { ... })
Registriert einen reaktiven Seiteneffekt, der Signal-Abhängigkeiten automatisch verfolgt.
2
const timeout = setTimeout(...)
Implementiert ein einfaches Debounce, um übermäßige Festplatten-I/O zu vermeiden.
3
onCleanup(() => clearTimeout(timeout))
Bereinigt den vorherigen Seiteneffekt, bevor der nächste läuft oder der Service zerstört wird.