Synchronisierung mit dem DOM mittels Tick

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
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

import { tick } from 'svelte';

Importiert das Lifecycle-Utility, um auf DOM-Updates zu warten.

await tick();

Pausiert die Ausführung bis zum nächsten Mikro-Task, in dem das DOM mit dem Zustand synchronisiert wurde.

console.log(element.textContent);

Nach tick ist garantiert, dass der DOM-Inhalt mit der aktualisierten Variable 'message' übereinstimmt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek