setTimeout, setInterval och timerdrift
Schemalägg engångs- och återkommande uppgifter med setTimeout/setInterval och lär dig en enkel teknik för att minska timerdrift.
setTimeout, setInterval och timerdrift är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.
Introduktion till timers
Mål: Schemalägg arbete på ett tydligt sätt.
- setTimeout: kör senare (en gång)
- setInterval: kör upprepade gånger
- Drift: varför timers glider
- Enkel åtgärd mot drift
setTimeout — engångskörning
setTimeout(fn, ms) körs en gång efter fördröjningen (minsta tidsintervall, inte exakt tid).
// setTimeout schedules a one-off callback
console.log("A: start");
setTimeout(function () {
console.log("B: after ~5ms");
}, 5);
console.log("C: scheduled");
setInterval — upprepande körning
setInterval körs automatiskt upprepade gånger; använd clearInterval(id) för att stoppa.
// 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 hur drift uppstår
Verkliga intervall varierar; arbete, enhetsbelastning och händelseloopen orsakar drift.
// 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);
Justerad schemaläggning
Justera efter en rörlig förväntad tid: beräkna nästa fördröjning utifrån den för att undvika att fel ackumuleras.
// 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 och checklista
Tips:
- Använd alltid clearInterval när Ni är klar.
- Använd helst justerade setTimeout-loopar för en jämn takt.
- Håll timer-callbacks korta för att minska drift.
Quiz om att åtgärda drift
Snabb kontroll: Minskad drift.
Sammanfattning
Sammanfattning: Använd setTimeout för engångskörningar och setInterval för upprepningar (kom ihåg att rensa den), och minska drift genom att justera nästa körning efter förväntade tider.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”setTimeout, setInterval och timerdrift” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”setTimeout, setInterval och timerdrift”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”setTimeout, setInterval och timerdrift”?
Schemalägg engångs- och återkommande uppgifter med setTimeout/setInterval och lär dig en enkel teknik för att minska timerdrift. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”setTimeout, setInterval och timerdrift”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- setTimeout, setInterval och timerdrift
- Debounce kontra throttle — implementera själv
- Animationstiming — introduktion med tidsbaserade loopar