Answer

Answer

t.me/js_test

Ответ:

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)
Очередь макрозадач после первого тика: [setIntervalsetTimeout 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');

Report Page