Микро и макрозадачи. Event loop

Question

Согласно документации код выполняется по следующим правилам:

Выбрать и исполнить старейшую задачу из очереди макрозадач.
Исполнить все микрозадачи:
Пока очередь микрозадач не пуста:
- Выбрать из очереди и исполнить старейшую микрозадачу
Отрисовать изменения страницы, если они есть.
Если очередь макрозадач пуста – подождать, пока появится макрозадача.
Перейти к шагу 1.

setTimeout(function timeout() {
    console.log('Таймаут');
}, 0);

let p = new Promise(function(resolve, reject) {
    console.log('Создание промиса');
    resolve();
});

p.then(function(){
    console.log('Обработка промиса');
});

console.log('Конец скрипта');

Результатом будет:

Создание промиса
Конец скрипта
Обработка промиса
Таймаут

Если settimeout - это макротаска, то почему она не выполнилась до обработки промиса, т.е:

Создание промиса
Конец скрипта
Таймаут
Обработка промиса

Answer 1

setTimeout - выполнился и запланировал новую большую задачу.

Переход к ее выполнению осуществляется, когда выполнились все маленькие задачки, созданные, внутри текущей большой.

Answer 2

// Макрозадача. Попадает в очередь макрозадач.
// Приоритет всегда отдается микрозадачам, то есть сначала 
// выполняются все микрозадачи, а потом макро.
setTimeout(function timeout() {
    console.log('Таймаут');
}, 0);

// Микрозадача (до resolve) не попадает в очередь микрозадач
let p = new Promise(function(resolve, reject) {
    console.log('Создание промиса');
resolve();
});

// Попадает в очередь микрозадач после Resolve
p.then(function(){
    console.log('Обработка промиса');
});

// Не попадает в очередь и выводится сразу
console.log('Конец скрипта');

БЛОГ НА HUSL

Микро и макрозадачи. Event loop

Ответы (2 шт):