Visualiseur de l'event loop

Pourquoi ce setTimeout(0) s'exécute-t-il après cette Promise ? Déroulez l'event loop pas à pas sur des exemples concrets.

JavaScript est mono-thread : il orchestre le travail via une call stack, une file de microtâches (Promises) et une file de macrotâches (setTimeout). Choisissez un exemple et avancez pas à pas pour voir l'ordre réel d'exécution.

Exemples préparés (l'outil n'exécute pas de code arbitraire) : chaque étape est tracée à la main pour rester fidèle au comportement réel du moteur.

La boucle événementielle en un schéma

Un seul thread, plusieurs files d'attente. Le moteur exécute la pile d'appels, délègue l'asynchrone aux Web APIs, et la boucle ré-injecte les tâches prêtes — microtâches d'abord, puis une macrotâche.

Modèle d'exécution de JavaScript
PILE D'APPELS LIFO — une seule chose à la fois g() f() main() le sommet s'exécute WEB APIs · NAVIGATEUR setTimeout() fetch() DOM events exécutées hors du thread JS Event Loop FILE DES MICROTÂCHES ★ PRIORITAIRE Promise.then queueMicrotask FILE DES MACROTÂCHES setTimeout cb DOM event cb 1 · appel async 2 · callback prête promesse résolue ① microtâches ② puis 1 macrotâche pousse sur la pile

La boucle ne dépile une tâche que lorsque la pile d'appels est vide. À chaque tour, elle vide d'abord toutes les microtâches (Promesses), puis exécute une seule macrotâche (setTimeout) — et recommence.

C'est pourquoi un Promise.then s'exécute toujours avant un setTimeout(…, 0) programmé au même instant.

Call stack

Microtâches (Promise)

Macrotâches (setTimeout)

Console

Retour aux outils