FJS26 · V47 · TISDAG
Vad gör JavaScript medan det väntar?
Chas Academy · Tisdag 17 november 2026
Ni har skrivit await fetch sedan v43. Idag tittar vi under ytan: vad gör JavaScript medan det väntar?
SYNKRONT OCH ASYNKRONT
Gissa först. Ändra sedan 1000 till 0.
console.log('A');
setTimeout(() => {
console.log('B');
}, 1000);
console.log('C');A, C, B. Och det blir samma ordning med 0 ms. setTimeout lämnar över väntandet till webbläsaren, och callbacken får vänta tills all synkron kod har kört klart.
SYNKRONT OCH ASYNKRONT
fetch i två sekunder skulle sidan frysa i två sekunder.SYNKRONT OCH ASYNKRONT
Allt det här lämnas över till webbläsaren, eller till Node.
fetch: frågor till en server.
setTimeout och setInterval.
Klick, tangenter, formulär: addEventListener.
I Node: läsa och skriva filer, fråga en databas.
Webbläsarens sätt att hålla ordning på allt som väntar.
Där JavaScript håller reda på vilken funktion som körs just nu. Ett anrop läggs överst, och tas bort när funktionen är klar.
EVENT LOOP
EVENT LOOP
then, catch, finally och koden efter await. Töms helt varje gång call stacken blir tom.
setTimeout, setInterval och events. En i taget, och bara när microtask-kön är tom.
EVENT LOOP
setTimeout(() => log('timeout'), 0);
Promise.resolve()
.then(() => log('promise'));
log('synkront');1. setTimeout lämnas till webbläsaren, som lägger callbacken i task queue.
2. then lägger sin callback i microtask queue.
3. synkront loggas.
4. Stacken är tom: först promise, sedan timeout.
Övning
Öppna 2-event-loop/js/main.js. Fem korta uppgifter med setTimeout, Promise.resolve().then och console.log. Skriv ner din gissning för varje, avkommentera en i taget och kör.
10 min
Du kan förutse i vilken ordning synkron kod, promises och timers körs, och förklara varför.
Blockera aldrig call stacken. Så länge din kod kör kan webbläsaren varken rita om sidan eller svara på ett klick.
Det äldsta sättet att säga: gör det här när du är klar.
CALLBACKS
En callback är en funktion du skickar in, som någon annan anropar senare.
button.addEventListener('click',
() => console.log('Klick!'),
);setTimeout(
() => console.log('Klart'),
1000,
);Synkron, men samma idé.
items.map( (item) => item.name, );
CALLBACKS
step('Kokar vatten', 1000, () => {
step('Maler bönor', 500, () => {
step('Bryggt klart', 1500, () => {
console.log('Kaffet är klart');
});
});
});Varje nytt steg hamnar ett snäpp längre in. Kan ett steg misslyckas måste varje callback kolla felet själv. Det finns inget gemensamt ställe att fånga dem på.
Ett löfte om ett värde som kommer senare.
Ett objekt som står för ett värde som inte finns än. Det kommer senare, eller så blir det ett fel.
fetch, response.json() och alla async-funktioner returnerar en promise.then och catch.PROMISES
PROMISES
const flipCoin = () =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.5) {
resolve('Krona');
} else {
reject(new Error('Klave'));
}
}, 1000);
});Oftast skapar du inte promises själv. fetch gör det åt dig. Men att skriva en gör det lättare att förstå vad som händer.
const wait = (ms) =>
new Promise((resolve) =>
setTimeout(resolve, ms),
);PROMISES
flipCoin()
.then((result) => console.log(result))
.catch((error) => console.log(error.message))
.finally(() => console.log('Landat'));then: körs när promisen blev fulfilled. catch: körs om den blev rejected, eller om något kastade ett fel tidigare i kedjan. finally: körs alltid. Bra för att dölja en laddar-text.
PROMISES
Varje then returnerar en ny promise. Stegen står under varandra i stället för i varandra.
step('Kokar vatten', 1000, () => {
step('Maler bönor', 500, () => {
step('Bryggt klart', 1500, () => {
console.log('Klart');
});
});
});wait(1000)
.then(() => wait(500))
.then(() => wait(1500))
.then(() => console.log('Klart'))
.catch((error) => console.error(error));PROMISES
fetch(url) .then((response) => response.json()) .then((user) => console.log(user.name)) .catch((error) => console.error(error));
const response = await fetch(url); const user = await response.json(); console.log(user.name);
Övning
Gör del 4 i code-alongen: krona eller klave med then, catch och finally, en egen wait(ms), kaffet som en kedja och till sist fetch med then mot https://jsonplaceholder.typicode.com/users/1.
15 min
Du kan skapa en promise, ta emot värdet med then och catch, och kedja flera steg.
async och await är promises med en snyggare syntax. Det tar vi i morgon.
EFTER PASSET