JavaScript Event Loop Trainer

Интерактивный тренажёр, который помогает понять порядок выполнения JavaScript-кода: синхронные вызовы, микрозадачи, таймеры и async/await.

Как тренироваться

1. Выберите сложность и тему задачи.
2. Предскажите порядок значений из console.log.
3. Проверьте ответ и изучите пошаговую визуализацию Call Stack, Microtask Queue и Task Queue.

Темы

Promise.then, Promise.finally, queueMicrotask, setTimeout, async/await, вложенные колбэки и очереди задач.

Частые вопросы

Почему setTimeout с нулевой задержкой выполняется после Promise.then?

Колбэк setTimeout попадает в очередь макрозадач, а Promise.then — в очередь микрозадач. Движок разбирает все микрозадачи до первой макрозадачи.

Что выполняется раньше: микрозадачи или макрозадачи?

Микрозадачи: после синхронного кода и после каждой макрозадачи их очередь опустошается целиком.

Что происходит с async-функцией после await?

Функция приостанавливается, а код после await выполняется как микрозадача.

Practice JavaScript event loop execution order with synchronous code, microtasks, timers, Promises, and async/await. English version.