Comprendre l'exécution de JavaScript : utiliser setTimeout et Promises pour déterminer le comportement synchrone et asynchrone

Comprendre comment JavaScript exécute le code : modèles synchrones et asynchrones

JavaScript est un langage monothread, ce qui signifie qu'il exécute une ligne de code à la fois. Comprendre comment il gère les tâches synchrones et asynchrones est crucial pour les développeurs. Souvent, des questions sur ce sujet apparaissent lors des entretiens techniques, ce qui rend important de bien comprendre ces concepts.

Lorsque les développeurs utilisent des fonctions comme setTimeout ou Promesses, le flux d'exécution peut sembler un peu imprévisible au début. Cependant, en suivant une structure claire, vous pouvez déterminer l'ordre exact dans lequel les différentes parties de votre code s'exécuteront. Ceci est particulièrement important lorsqu'il s'agit de rappels et files d'attente d'événements.

Dans cet exemple, nous expliquerons comment JavaScript gère les tâches synchrones telles que console.log et des opérations asynchrones comme setTimeout et Promesses. À la fin de cette explication, vous comprendrez mieux comment la boucle d’événements JavaScript hiérarchise et traite les tâches.

Cet article est conçu pour vous aider à déterminer l'ordre d'exécution en JavaScript, une compétence utile pour répondre aux questions d'entretien ou déboguer du code asynchrone. Passons à un exemple pratique pour démontrer clairement les concepts.

Explorer le flux d'exécution JavaScript : code synchrone ou asynchrone

En JavaScript, comprendre l'ordre d'exécution du code synchrone et asynchrone est essentiel, notamment lorsqu'il s'agit de setTimeout et Promesses. Le concept clé à comprendre est la manière dont la boucle d'événements traite d'abord les tâches synchrones, puis passe à la gestion des tâches asynchrones en file d'attente. Dans l'exemple de code fourni, les deux premiers journaux (« A » et « F ») sont synchrones, ce qui signifie qu'ils sont exécutés dans l'ordre exact dans lequel ils apparaissent dans le code. Dès leur exécution, le script planifie immédiatement des tâches asynchrones comme setTimeout pour un traitement ultérieur.

La fonction setTimeout est un moyen courant de différer les opérations, créant une impression de retard dans le flux d'exécution. Dans ce cas, les deux setTimeout les fonctions sont utilisées pour ajouter les journaux de console « B » et « E » à la file d'attente des événements. Il est important de noter que bien que « E » ait un délai de 0 milliseconde, il est toujours mis en file d'attente une fois les opérations synchrones en cours et les microtâches terminées. Comprendre cette distinction subtile est crucial pour déterminer l'ordre d'exécution de tâches JavaScript plus complexes.

A l'intérieur du premier setTimeout rappel, le journal "B" est imprimé en premier car il fait toujours partie de la file d'attente des tâches synchrones, qui est prioritaire. Ensuite, au sein de ce rappel, une promesse résolue est créée avec Promesse.résoudre. Cela déclenche une microtâche qui garantit que le journal « D » se produit après « B » mais avant toute autre tâche dans la file d'attente des événements principaux. Ce comportement des promesses placées dans la file d'attente des microtâches est ce qui permet à "D" d'être enregistré avant que le deuxième rappel setTimeout n'enregistre "E". Ainsi, les microtâches ont la priorité sur les tâches asynchrones standards.

Pour résumer l'ordre d'exécution final : "A" et "F" sont enregistrés de manière synchrone, suivis de "B", qui est mis en file d'attente par le premier setTimeout. La promesse résolue entraîne la journalisation suivante de « D » en tant que microtâche. Enfin, "E" est enregistré en dernier car il fait partie du deuxième setTimeout rappel. Cette compréhension du flux d'exécution de JavaScript, combinant les tâches synchrones, la boucle d'événements et les microtâches, est inestimable pour répondre aux questions d'entretien ou déboguer du code asynchrone dans des projets réels.

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");

Plongez en profondeur dans la boucle d'événements et la priorisation des tâches de JavaScript

Un aspect clé du comportement asynchrone de JavaScript est le boucle d'événements, qui est responsable de la gestion de l'exécution des rappels, des promesses et d'autres codes asynchrones. Cette boucle d'événements vérifie en permanence si la pile d'appels est vide et si c'est le cas, elle traite les tâches de la file d'attente de rappel et de la file d'attente des microtâches. Comprendre comment les tâches sont hiérarchisées dans ces files d'attente est essentiel pour garantir que le code se comporte comme prévu, en particulier lors de la gestion setTimeout et promet simultanément.

La file d'attente des microtâches est prioritaire sur la file d'attente de rappel. Des tâches comme promettre des résolutions sont placés dans la file d'attente des microtâches, ce qui signifie qu'ils sont exécutés avant toute tâche retardée de la file d'attente de rappel, même si setTimeout a un délai de zéro. C'est pourquoi dans l'exemple de code, le log "D" de la promesse est exécuté avant le log "E" du deuxième setTimeout. Il est essentiel que les développeurs comprennent cela lorsqu’ils écrivent du code qui mélange des opérations asynchrones pour éviter tout comportement inattendu.

Dans les applications du monde réel, les opérations asynchrones telles que les appels d'API ou les minuteries interagissent fréquemment avec le code synchrone. En connaissant le fonctionnement de la boucle d'événements, de la file d'attente de rappel et de la file d'attente des microtâches, les développeurs peuvent mieux prédire le résultat de leur code. Ceci est particulièrement important lors de l'optimisation des performances ou du débogage de scripts complexes où les deux opérations asynchrones et le code synchrone interagissent fréquemment.