Обработчики

Ответ:

script start
script end
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
promise 5
promise 6

Объяснение:

First tick:

• Первый console.log помещается в очередь вызовов и тут же выполняется.
• setInterval - отложенный вызов, добавляем таску в очередь макрозадач
• setTimeout 1 - отложенный вызов, добавляем таску в очередь макрозадач
• Оба колбека для Promise.resolve добавляем в очередь микрозадач.
• Последний console.log помещается в очередь вызовов и тут же выполняется.
• Поскольку стек вызовов пустой (весь синхронный код выполнился) - выполняем колбеки из очереди микрозадач (оба then после Promise.resolve)

Очередь макрозадач после первого тика: [setInterval, setTimeout 1]

- Вывод в консоли после первого тика

script start
script end
promise 1
promise 2

Second tick:

Поскольку очередь микрозадач пуста, выполняем первую задачу из очереди макрозадач - setInterval:

• выполняем строчку console.log('setInterval')
• добавляем следующий вызов функции setInterval в очередь макрозадач

Очередь макрозадач после второго тика: [setTimeout 1,setInterval]

- Вывод в консоли после второго тика

setInterval

Third tick:

Очередь микрозадач все ещё пуста, поэтому опять выполняем первую задачу из очереди макрозадач - setTimeout 1 :

• выполняем строчку console.log('setTimeout 1')
• "promise 3" и "promise 4" обработчики добавляем в очередь микрозадач
• Запускаем эти обработчики - выполняются эти строки

console.log('promise 3')
console.log('promise 4')

• Следующий обработчик (после promise 4) добавляет обработчик setTimeout 2 в очередь макрозадач.

Очередь макрозадач после третьего тика: [setInterval,setTimeout 2]

- Вывод в консоли после третьего тика

setTimeout 1
promise 3
promise 4

Fourth Tick

Очередь микрозадач пуста, выполняем первую задачу из очереди макрозадач - setInterval:

• выполняем строчку console.log('setInterval')
• добавляем следующий вызов функции setInterval в очередь макрозадач

Очередь макрозадач после четвертого тика: [setTimeout 2,setInterval]

- Вывод в консоли после четвертого тика

setInterval

Fifth Tick

Выполняем задачу setTimeout 2

• выполняем строчку console.log('setTimeout 2')
• "promise 5" и "promise 6" обработчики добавляем в очередь микрозадач
• Запускаем эти обработчики - выполняются эти строки

console.log('promise 5')
console.log('promise 6')

• Запускаем последний обработчик(который идёт за "promise 6") - выполняем строку clearInterval(interval), которая удаляет обработчик setInterval из списка макрозадач.

Очередь макрозадач после пятого тика: []

- Вывод в консоли после пятого тика

setTimeout 2
promise 5
promise 6

Код для проверки:

console.log('script start');

const interval = setInterval(() => {
  console.log('setInterval');
}, 0);

setTimeout(() => {
  console.log('setTimeout 1');

  Promise.resolve()
    .then(() => console.log('promise 3'))
    .then(() => console.log('promise 4'))
    .then(() => {
      setTimeout(() => {
        console.log('setTimeout 2');
        Promise.resolve()
          .then(() => console.log('promise 5'))
          .then(() => console.log('promise 6'))
          .then(() => clearInterval(interval));
      }, 0);
    });
}, 0);

Promise.resolve()
  .then(() => console.log('promise 1'))
  .then(() => console.log('promise 2'));

console.log('script end');