Inzicht in de uitvoering van JavaScript: setTimeout en beloften gebruiken om synchroon versus asynchroon gedrag te bepalen

Begrijpen hoe JavaScript code uitvoert: synchrone en asynchrone patronen

JavaScript is een single-threaded taal, wat betekent dat het één regel code tegelijk uitvoert. Begrijpen hoe het zowel synchrone als asynchrone taken afhandelt, is cruciaal voor ontwikkelaars. Vaak verschijnen er vragen over dit onderwerp in technische interviews, waardoor het belangrijk is om deze concepten grondig te begrijpen.

Wanneer ontwikkelaars functies gebruiken zoals setTime-out of Beloften, kan de uitvoeringsstroom in eerste instantie een beetje onvoorspelbaar lijken. Door echter een duidelijke structuur te volgen, kunt u de exacte volgorde bepalen waarin verschillende delen van uw code worden uitgevoerd. Dit is vooral belangrijk bij het omgaan met terugbellen En wachtrijen voor evenementen.

In dit voorbeeld leggen we uit hoe JavaScript omgaat met synchrone taken zoals console.log en asynchrone bewerkingen zoals setTime-out En Beloften. Aan het einde van deze uitleg zul je een beter inzicht krijgen in hoe de JavaScript-gebeurtenislus taken prioriteert en verwerkt.

Dit artikel is bedoeld om u te helpen de volgorde van uitvoering in JavaScript te bepalen, een nuttige vaardigheid bij het beantwoorden van interviewvragen of het debuggen van asynchrone code. Laten we een praktisch voorbeeld bekijken om de concepten duidelijk te demonstreren.

Ontdek de JavaScript-uitvoeringsstroom: synchrone versus asynchrone code

In JavaScript is het begrijpen van de uitvoeringsvolgorde van synchrone en asynchrone code essentieel, vooral als het gaat om setTime-out En Beloften. Het belangrijkste concept dat we moeten begrijpen, is hoe de gebeurtenislus eerst synchrone taken verwerkt en vervolgens asynchrone taken in de wachtrij afhandelt. In de gegeven voorbeeldcode zijn de eerste twee logboeken ("A" en "F") synchroon, wat betekent dat ze worden uitgevoerd in de exacte volgorde waarin ze in de code verschijnen. Op het moment dat ze worden uitgevoerd, plant het script onmiddellijk asynchrone taken zoals setTimeout voor latere verwerking.

De functie setTimeout is een gebruikelijke manier om bewerkingen uit te stellen, waardoor een gevoel van vertraging in de uitvoeringsstroom ontstaat. In dit geval beide setTime-out functies worden gebruikt om consolelogboeken "B" en "E" toe te voegen aan de gebeurteniswachtrij. Het is belangrijk op te merken dat hoewel "E" een vertraging van 0 milliseconden heeft, deze nog steeds in de wachtrij wordt geplaatst nadat de huidige synchrone bewerkingen en de microtaken zijn voltooid. Het begrijpen van dit subtiele onderscheid is cruciaal bij het bepalen van de uitvoeringsvolgorde voor complexere JavaScript-taken.

Binnen de eerste setTime-out callback wordt het logboek "B" eerst afgedrukt omdat dit nog steeds deel uitmaakt van de synchrone takenwachtrij, die prioriteit heeft. Vervolgens wordt binnen die callback een opgeloste belofte gecreëerd Belofte.oplossing. Dit activeert een microtaak die ervoor zorgt dat het logboek "D" na "B" plaatsvindt, maar vóór andere taken in de hoofdgebeurteniswachtrij. Dit gedrag waarbij Promises in de microtask-wachtrij worden geplaatst, zorgt ervoor dat "D" kan worden geregistreerd voordat de tweede setTimeout-callback "E" registreert. Microtaken hebben dus voorrang op standaard asynchrone taken.

Om de uiteindelijke uitvoeringsopdracht samen te vatten: "A" en "F" worden synchroon geregistreerd, gevolgd door "B", die in de wachtrij wordt geplaatst door de eerste setTimeout. De opgeloste belofte zorgt ervoor dat "D" vervolgens als microtaak wordt geregistreerd. Ten slotte wordt "E" als laatste geregistreerd omdat deze deel uitmaakt van de tweede setTime-out terugbellen. Dit begrip van de uitvoeringsstroom van JavaScript, waarbij synchrone taken, de gebeurtenislus en microtaken worden gecombineerd, is van onschatbare waarde bij het beantwoorden van interviewvragen of het debuggen van asynchrone code in echte projecten.

console.log("A");
setTimeout(() => {
    console.log("B");
    Promise.resolve("C").then(() => console.log("D"));
}, 1000);
setTimeout(() => console.log("E"), 0);
console.log("F");

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 500);
Promise.resolve().then(() => {
    console.log("Promise 1");
});
console.log("End");

Duik diep in de Event Loop en taakprioritering van JavaScript

Een belangrijk aspect van het asynchrone gedrag van JavaScript is de gebeurtenis lus, dat verantwoordelijk is voor het afhandelen van de uitvoering van callbacks, beloften en andere asynchrone code. Deze gebeurtenislus controleert voortdurend of de call-stack leeg is, en als dat het geval is, worden de taken uit de callback-wachtrij en de microtask-wachtrij verwerkt. Inzicht in de prioriteit van taken binnen deze wachtrijen is van cruciaal belang om ervoor te zorgen dat de code zich gedraagt ​​zoals verwacht, vooral bij de verwerking ervan setTime-out en beloften tegelijk.

De wachtrij voor microtaken heeft voorrang op de terugbelwachtrij. Taken zoals resoluties beloven worden in de microtask-wachtrij geplaatst, wat betekent dat ze worden uitgevoerd vóór vertraagde taken uit de callback-wachtrij, zelfs als de setTimeout een vertraging van nul heeft. Dit is de reden waarom in het codevoorbeeld het logbestand "D" uit de belofte wordt uitgevoerd vóór het logbestand "E" uit de tweede setTimeout. Het is van cruciaal belang dat ontwikkelaars dit begrijpen bij het schrijven van code die asynchrone bewerkingen combineert om onverwacht gedrag te voorkomen.

In toepassingen in de echte wereld hebben asynchrone bewerkingen zoals API-oproepen of timers vaak interactie met synchrone code. Door te weten hoe de gebeurtenislus, de callback-wachtrij en de microtask-wachtrij werken, kunnen ontwikkelaars de uitkomst van hun code beter voorspellen. Dit is vooral belangrijk bij het optimaliseren van de prestaties of het debuggen van complexe scripts waarbij beide nodig zijn asynchrone operaties en synchrone code hebben vaak interactie.