Quelle sera la sortie de ce code?

retour au cours

          console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => console.log(6));

console.log(7);

La sortie console est : 1 7 3 5 2 6 4.

La tâche est assez simple, nous avons juste besoin de savoir comment fonctionnent les files d’attente pour microtâches et macrotâches.

Voyons ce qui se passe, étape par étape.

          console.log(1);
// La première ligne s'exécute immédiatement, elle sort `1`.
// Les files d'attente Macrotask et Microtask sont vides, pour l'instant.

setTimeout(() => console.log(2));
// `setTimeout` ajoute la callback à la file d'attente macrotask.
// - la file d'attente macrotask contient:
//   `console.log(2)`

Promise.resolve().then(() => console.log(3));
// La callback est ajoutée à la file d'attente des microtâches.
// - contenu de la file d'attente des microtâches:
//   `console.log(3)`

Promise.resolve().then(() => setTimeout(() => console.log(4)));
// La callback avec `setTimeout (...4) `est ajoutée aux microtâche
// - contenu de la file d'attente des microtâches:
//   `console.log(3); setTimeout(...4)`

Promise.resolve().then(() => console.log(5));
// La callback est ajoutée à la file d'attente des microtâches
// - contenu de la file d'attente des microtâches:
//   `console.log(3); setTimeout(...4); console.log(5)`

setTimeout(() => console.log(6));
// `setTimeout` ajoute la callback aux macrotasks
// - contenu de la file d'attente macrotask:
//   `console.log(2); console.log(6)`

console.log(7);
// Affiche 7 immédiatement.
        

Pour résumer,

Les numéros 1 & 7 apparaissent immédiatement, car les appels simples console.log n’utilisent aucune file d’attente.
Ensuite, une fois le flux de code principal terminé, la file d’attente des microtâches s’exécute. – Il possède les commandes: console.log(3); setTimeout(...4); console.log(5). – Les nombres 3 & 5 apparaissent, tandis que setTimeout(() => console.log(4)) ajoute l’appel console.log(4) à la fin de la file d’attente macrotask. – La file d’attente macrotask est maintenant: console.log(2); console.log(6); console.log(4).
Une fois la file d’attente des microtâches vide, la file d’attente des macrotasques s’exécute. Il sort 2, 6, 4.

Au final, nous avons la sortie: 1 7 3 5 2 6 4.