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

javascript

import { tick } from 'svelte';
 
let visible = false;
 
async function showAndFocus() {
  visible = true;
  await tick();
  document.getElementById('input').focus();
}

svelte

Erklärung

await tick();

Pausiert die Funktionsausführung, bis das DOM mit dem neuesten Zustand synchronisiert wurde.

document.getElementById('input').focus();

Interagiert sicher mit einem Element, das vor dem Auflösen von tick() möglicherweise noch nicht existierte.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Warten auf DOM-Updates mit tick

Verwandt