Snippet

Handhabung von DOM-Updates mit der tick-Funktion

Die 'tick'-Funktion gibt ein Promise zurück, das aufgelöst wird, sobald alle ausstehenden Zustandsänderungen auf das DOM angewendet wurden. Dies ist wichtig, wenn Sie unmittelbar nach einer Zustandsänderung mit dem DOM interagieren müssen.

snippet.js

javascript

import { tick } from 'svelte';
 
let message = 'Original';
 
async function updateMessage() {
  message = 'Updated Content';
  // Svelte hasn't updated the DOM yet
  await tick();
  // Now the DOM is guaranteed to be in sync
  console.log('DOM is updated');
}

svelte

Erklärung

message = 'Updated Content';

Ändert den Status; Svelte plant ein DOM-Update, führt es aber nicht sofort aus.

await tick();

Wartet darauf, dass die Microtask-Queue geleert und das DOM aktualisiert wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Handhabung von DOM-Updates mit der tick-Funktion

Verwandt