Macrotasks och uppgiftskön
Förstå hur timers och I/O schemaläggs.
Macrotasks och uppgiftskön är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. 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 4 lektioner.
Vad är en makrouppgift?
En makrouppgift (även kallad en uppgift) är en arbetsenhet som schemaläggs för att köras senare, efter att den aktuella synkrona koden har körts klart. Callback-funktioner från setTimeout är det klassiska exemplet.
Makrouppgifter väntar i uppgiftskön tills anropsstacken är tom.
setTimeout skjuter upp arbete
setTimeout registrerar en callback-funktion som ska köras senare. Även med en fördröjning på 0 körs den efter all aktuell synkron kod.
console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');Uppgiftskön
När en timer löper ut placeras dess callback-funktion i uppgiftskön. Händelseloopen hämtar en uppgift från kön först när anropsstacken är tom, kör den tills den är klar och kontrollerar sedan kön igen.
console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');Uppgifter körs i den ordning de köades
Uppgifter med samma fördröjning körs i den ordning de schemalades. Uppgiftskön är FIFO: First In, First Out.
setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');Fördröjningen är ett minimum, inte en exakt tid
Fördröjningen Du anger är den minsta tiden innan callback-funktionen kan köras. Den faktiska körningen sker först när stacken har tömts och tidigare uppgifter har slutförts, så den kan inträffa senare.
setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');Sortering efter fördröjning
Olika fördröjningar ändrar ordningen: kortare fördröjningar blir körbara tidigare och körs därför vanligtvis före längre fördröjningar, oavsett schemaläggningsordning.
setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');En uppgift per loopvarv
Händelseloopen kör exakt en makrouppgift per varv och utför sedan annat arbete före nästa varv. Det håller systemet responsivt mellan uppgifterna.
console.log('1');
setTimeout(() => {
console.log('2');
setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);Nästlade timers köas senare
En timer som schemaläggs inuti en uppgift placeras i kön efter uppgifter som redan väntar, så den körs under ett senare loopvarv.
setTimeout(() => {
console.log('outer');
setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);setInterval är också makrouppgifter
setInterval schemalägger en upprepad makrouppgift. Här kör vi några iterationer och stoppar sedan med clearInterval för att hålla resultatet begränsat.
let count = 0;
const id = setInterval(() => {
count++;
console.log('tick ' + count);
if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');Synkron kod går alltid först
Oavsett hur liten fördröjningen är väntar varje makrouppgift bakom all synkron kod i den aktuella körningen. Stacken måste tömmas först.
setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');Varför makrouppgifter är viktiga
Makrouppgifter gör att Du kan skjuta upp arbete utan att blockera. Om ett tungt arbete delas upp i tidsstyrda delar förblir appen responsiv. Makrouppgifter har dock inte högst prioritet: mikrouppgifter (Promises) körs före nästa makrouppgift, vilket Du får se härnäst.
console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');Snabb kontroll
När körs en callback-funktion från setTimeout(cb, 0)?
Repetition: Makrouppgifter
Du har lärt Dig hur uppskjutet arbete schemaläggs:
- Makrouppgifter (
setTimeout,setInterval) väntar i uppgiftskön. - Kön är FIFO, och händelseloopen kör en uppgift per varv.
- Fördröjningen är ett minimum, och synkron kod körs alltid först.
- Mikrouppgifter har högre prioritet, vilket Du får utforska härnäst.
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 ”Macrotasks och uppgiftskön” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Macrotasks och uppgiftskön”, 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 4 lektioner.
Vad lär jag mig i ”Macrotasks och uppgiftskön”?
Förstå hur timers och I/O schemaläggs. 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 2 av 4.
Hur lång tid tar lektionen ”Macrotasks och uppgiftskön”?
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
- Anropsstacken
- Macrotasks och uppgiftskön
- Microtasks och Promises
- queueMicrotask och körordning