Event loop — порядок вывода

Event loop

Задача #1

Что будет в консоли?

console.log(1);
 
setTimeout(function () {
    console.log(2);
});
 
Promise.resolve(3).then(console.log);
 
console.log(4);
 
setTimeout(function () {
    console.log(5);
}, 0);
 
console.log(6);

Ответ

1, 4, 6, 3, 2, 5

Очередность: синхронный код → микрозадачи (microtasks) → макрозадачи (macrotasks).

Задача #2

Что будет в консоли?

function main() {
    Promise.resolve().then(() => {
        console.log("Dima");
    });
 
    setTimeout(() => {
        console.log("Masha");
    }, 1000);
 
    setTimeout(() => {
        console.log("Gena");
 
        setTimeout(() => {
            console.log("Kirill");
        }, 0);
    }, 0);
 
    console.log("Anna");
 
    queueMicrotask(() => {
        console.log("Fedor");
    });
 
    setTimeout(() => {
        console.log("Gosha");
    }, 0);
 
    new Promise(() => console.log("Boris")).then();
}
 
main();

Ответ

Anna
Boris
Dima
Fedor
Gena
Gosha
Kirill
Masha

Синхронно: Anna, Boris (исполнитель new Promise вызывается сразу). Микрозадачи: Dima, Fedor. Макрозадачи с задержкой 0: Gena, Gosha, затем вложенный Kirill. Последним — Masha (задержка 1000мс).

Задача #3

Что будет в консоли и почему?

const foo2 = () => {
    console.log("foo2");
    setTimeout(foo2);
};
 
foo2();

Ответ

Бесконечный foo2, но браузер не зависает: каждая новая итерация планируется как макрозадача (setTimeout). Между ними event loop успевает отрисовывать кадр и обрабатывать события — вкладка остаётся отзывчивой.

Задача #4

Что будет в консоли и почему?

const foo1 = () => {
    console.log("foo1");
    return Promise.resolve().then(foo1);
};
 
foo1();

Ответ

Бесконечный foo1, и здесь вкладка зависнет: каждая итерация планируется как микрозадача. Очередь микрозадач опустошается полностью перед следующей макрозадачей, поэтому event loop не доходит до рендеринга и обработки событий — страница «мертва».

См. также

• event-loop (теория) — как устроен event loop