setTimeout, setInterval og tidsdrift
Planlegg engangs- og gjentakende oppgaver med setTimeout/setInterval, og lær en enkel teknikk for å redusere tidsdrift.
setTimeout, setInterval og tidsdrift er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Introduksjon til tidsstyrere
Mål: Planlegg arbeid på en ryddig måte.
- setTimeout: kjør senere (én gang)
- setInterval: kjør gjentatte ganger
- Avvik: hvorfor tidsstyrere forskyves
- Enkel løsning på avvik
setTimeout — én gang
setTimeout(fn, ms) kjører én gang etter forsinkelsen (minimumstid, ikke nøyaktig tidspunkt).
// setTimeout schedules a one-off callback
console.log("A: start");
setTimeout(function () {
console.log("B: after ~5ms");
}, 5);
console.log("C: scheduled");
setInterval — gjentakelse
setInterval gjentar seg automatisk. Bruk clearInterval(id) for å stoppe.
// setInterval repeats; always clear it
let count = 0;
const id = setInterval(function () {
count = count + 1;
console.log("tick", count);
// Stop after 3 ticks to avoid endless logs
if (count >= 3) {
clearInterval(id);
console.log("stopped");
}
}, 5);
Se avvik oppstå
De reelle intervallene varierer. Arbeid, belastning på enheten og hendelsesløkken fører til avvik.
// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;
const driftId = setInterval(function () {
const now = Date.now();
const gap = now - last; // actual gap
last = now;
times = times + 1;
console.log("gap~", gap, "ms");
if (times >= 3) {
clearInterval(driftId);
console.log("done");
}
}, targetMs);
Justert tidsplanlegging
Juster etter et bevegelig forventet tidspunkt: Beregn neste forsinkelse ut fra dette for å unngå at feilen akkumuleres.
// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;
function tick() {
ticks = ticks + 1;
const now = Date.now();
const drift = now - expected; // positive if we are late
console.log("drift:", drift, "ms");
// Compute next expected time first
expected = expected + step;
// Next delay = time until the next expected timestamp
const nextDelay = Math.max(0, expected - Date.now());
if (ticks < 3) {
setTimeout(tick, nextDelay);
} else {
console.log("aligned stop");
}
}
setTimeout(tick, step);
Tips og sjekkliste
Tips:
- Bruk alltid clearInterval når De er ferdig.
- Foretrekk justerte setTimeout-løkker for jevn takt.
- Hold tidsstyrerens tilbakekall korte for å redusere avvik.
Quiz om løsning på avvik
Kort sjekk: Reduksjon av avvik.
Oppsummering
Oppsummering: Bruk setTimeout for engangskjøringer og setInterval for gjentakelser (husk å stoppe den), og reduser avvik ved å justere neste kjøring etter forventede tidspunkter.
Lær deg JavaScript 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
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «setTimeout, setInterval og tidsdrift» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «setTimeout, setInterval og tidsdrift», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «setTimeout, setInterval og tidsdrift»?
Planlegg engangs- og gjentakende oppgaver med setTimeout/setInterval, og lær en enkel teknikk for å redusere tidsdrift. Du øver på JavaScript 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 JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript 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 1 av 3.
Hvor lang tid tar leksjonen «setTimeout, setInterval og tidsdrift»?
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 JavaScript Academy-leksjonen?
Ja. Alle JavaScript 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
- setTimeout, setInterval og tidsdrift
- Debounce kontra throttle — laget fra grunnen av
- Animasjonstiming — innføring med tidsbaserte løkker