Sveltejs Academy · leksjon

tick(): Vente på DOM-oppdateringer

Vent på tick() for å sikre at DOM-en gjenspeiler den nyeste tilstanden før De leser layoutverdier.

Leksjon 4 av 413 trinn

tick(): Vente på DOM-oppdateringer er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Hva tick er

tick() returnerer et promise som løses etter at ventende tilstandsendringer er brukt på DOM-en.

Importer den

Importer fra svelte.

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

Hvorfor vente

Hvis tilstanden endres og DOM-en leses umiddelbart etterpå, kan de gamle verdiene vises. tick() sørger for at målingene er oppdaterte.

Eksempel

Vent på tick før du ruller til et nylig satt inn element.

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

I hendelsesbehandlere

Gjør behandleren asynkron slik at du kan bruke await tick.

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

I reaktive setninger

Du kan bruke await tick fra reaktive setninger som er pakket inn i asynkrone funksjoner.

Kontra afterUpdate

afterUpdate kjøres etter hver oppdatering, mens tick() bare venter på den ventende oppdateringen som gjelder nå.

SSR-oppførsel

På serveren løses tick() umiddelbart, så den kan brukes uten en betingelse.

Vanlig fallgruve

Hvis du glemmer await, returnerer tick et promise uten at du venter på det. Bruk alltid await.

Kombiner med bind:this

De fleste bruksområdene for tick innebærer å lese fra eller rulle til et bundet element.

Lite hjelpeverktøy

Pakk inn tick og rulling i et hjelpeverktøy for mønstre som gjentas.

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

Hurtigsjekk

Hva returnerer tick()?

Besvar den i den interaktive leksjonen

Oppsummering

tick() lar deg vente på den neste DOM-oppdateringen, slik at påfølgende lesinger ser den nyeste tilstanden. Kombiner den med referanser.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «tick(): Vente på DOM-oppdateringer» gratis?

Ja – hele teksten i «tick(): Vente på DOM-oppdateringer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «tick(): Vente på DOM-oppdateringer»?

Vent på tick() for å sikre at DOM-en gjenspeiler den nyeste tilstanden før De leser layoutverdier. Du øver på Sveltejs Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Sveltejs Academy?

Ingen tidligere erfaring er nødvendig. Sveltejs Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «tick(): Vente på DOM-oppdateringer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Sveltejs Academy-leksjonen?

Ja. Alle Sveltejs Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Sveltejs Academy