javascript / intermediate
Snippet
Warten auf DOM-Updates mit tick
In Svelte aktualisieren Zustandsänderungen das DOM nicht sofort. Sie werden aus Effizienzgründen gebündelt. Die tick-Funktion gibt ein Promise zurück, das aufgelöst wird, sobald alle ausstehenden Zustandsänderungen auf das DOM angewendet wurden.
snippet.js
1
2
3
4
5
6
7
8
9
import { tick } from 'svelte';let visible = false;async function showAndFocus() {visible = true;await tick();document.getElementById('input').focus();}
svelte
Erklärung
1
await tick();
Pausiert die Funktionsausführung, bis das DOM mit dem neuesten Zustand synchronisiert wurde.
2
document.getElementById('input').focus();
Interagiert sicher mit einem Element, das vor dem Auflösen von tick() möglicherweise noch nicht existierte.