Sveltejs Academy · Lektion

tick(): Vent på DOM-opdateringer

Vent på tick() for at sikre, at DOM'en afspejler den seneste state, før layoutværdier læses

Lektion 4 af 413 trin

tick(): Vent på DOM-opdateringer er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.

Hvad tick er

tick() returnerer et promise, der opfyldes, efter ventende tilstandsændringer er anvendt på DOM'en.

Importér det

Importér fra svelte.

<script>
  import { tick } from "svelte";
</script>

Hvorfor vente

Hvis du ændrer tilstanden og straks aflæser DOM'en, ser du måske de gamle værdier. tick() sikrer friske målinger.

Eksempel

Vent på tick, før du ruller til et netop indsat element.

items = [...items, newItem];
await tick();
lastEl.scrollIntoView();

I eventhåndteringer

Gør håndteringen asynkron, så du kan afvente tick.

async function add() {
  items = [...items, x];
  await tick();
  measure();
}

I reaktive erklæringer

Du kan afvente tick fra reaktive erklæringer, der er pakket ind i asynkrone funktioner.

I forhold til afterUpdate

afterUpdate udløses efter hver opdatering, mens tick() kun venter på den aktuelle ventende opdatering.

SSR-adfærd

På serveren opfyldes tick() med det samme, så du kan bruge den uden betinget logik.

Typisk faldgrube

Hvis du glemmer await, returnerer tick et promise, men du venter ikke på det. Afvent det altid.

Kombinér med bind:this

De fleste anvendelser af tick handler om at aflæse eller rulle til et bundet element.

Lille hjælpefunktion

Pak tick og rulning ind i en hjælpefunktion til gentagne mønstre.

async function scrollIntoView(el) { await tick(); el.scrollIntoView(); }

Hurtigt tjek

Hvad returnerer tick()?

Besvar den i den interaktive lektion

Opsamling

tick() lader dig afvente den næste DOM-opdatering, så efterfølgende aflæsninger ser den nyeste tilstand. Kombinér den med referencer.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “tick(): Vent på DOM-opdateringer” gratis?

Ja — hele teksten til “tick(): Vent på DOM-opdateringer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “tick(): Vent på DOM-opdateringer”?

Vent på tick() for at sikre, at DOM'en afspejler den seneste state, før layoutværdier læses Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Sveltejs Academy?

Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “tick(): Vent på DOM-opdateringer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?

Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Sveltejs Academy