javascript / intermediate
Snippet
Synchronisierung mit dem DOM mittels Tick
In Svelte werden Zustandsaktualisierungen nicht sofort auf das DOM angewendet, sondern gesammelt (batching). Die 'tick'-Funktion gibt ein Promise zurück, das aufgelöst wird, sobald alle ausstehenden Änderungen angewendet wurden, was wichtig für Logik ist, die vom aktualisierten DOM abhängt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { tick } from 'svelte';let message = 'Original';let element;async function updateMessage() {message = 'Updated Content';console.log(element.textContent); // Still 'Original'await tick();console.log(element.textContent); // Now 'Updated Content'}
svelte
Erklärung
1
import { tick } from 'svelte';
Importiert das Lifecycle-Utility, um auf DOM-Updates zu warten.
2
await tick();
Pausiert die Ausführung bis zum nächsten Mikro-Task, in dem das DOM mit dem Zustand synchronisiert wurde.
3
console.log(element.textContent);
Nach tick ist garantiert, dass der DOM-Inhalt mit der aktualisierten Variable 'message' übereinstimmt.