Какой порядок в event loop?

Question

[GNG999]

Есть код

const run = () => {
    setTimeout(() => {
        console.log('timeOut')
    }, 0)

    console.log(1)
    
    new Promise(resolve => {
        console.log("Promise")
        
        setTimeout(() => {
            console.log('777')
            resolve()
        }, 0)
    })
    .then(() => console.log('then1'))
    .then(() => console.log('then2'))

    console.log(4)

    setTimeout(() => {
        console.log('timeOut2')
    }, 0)
}

run()

почему порядок вывода таков ?
1
Promise
4
timeOut
777
then1
then2
timeOut2

То что первым выводится синхр код - понятно. Но дальше у нас идут таймауты макро таски и промис с двумя then это к микро таскам
Микро таски же должны быть в первую очередь после синхр кода ?

Comments

[Lynn «Кофеман»]

Никакого официально документа о порядке нет. В частности потому что в стандарте JS нет функции setTimeout и вообще не упоминается event loop.

Так что вопрос надо задавать про конкретный движок и нет никакой гарантии что результат будет одинаковый в разных движках.

[GNG999]

Lynn «Кофеман», V8

[Lynn «Кофеман»]

GNG999, в v8 нет event loop
есть несколько рантаймов которые используют v8, в частности браузер Хром (и его клоны) и nodejs.

Ещё прикол в том что Promise это часть JS, а вот setTimeout нет и они живут в разных «очередях».

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

[Lynn «Кофеман»]

Примерно тут начинают появляться микро-таски и макро-таски и весь этот фарш специфический для конкретного рантайма.

[Everything_is_bad]

изначально неверный подход, рассчитывать на какой-то порядок в event loop

[Виктор Л]

Так если кому интересно
https://www.jsv9000.app/

Answer 1

[Alexandroppolus]

1 и Promise - это синхронный код

далее таски из таймаутов, по очереди: timeOut, 777, timeOut2

но таск 777 при своем выполнении создает 2 микротаска (then1 и then2), вот они выполнятся до таска timeOut2

Микро таски же должны быть в первую очередь после синхр кода ?

на момент старта тасков timeOut и 777, этих микротасков ещё не было

Comments

[GNG999]

"на момент старта тасков timeOut и 777, этих микротасков ещё не было"
я думал принцип такой
Сначала синхронный код
Остальное раскидываем по очередям - макротаски в одну, микротаски - в другую.
Потом уже из очередей сначала вытаскиваем микротаски , потом - макро

[Alexandroppolus]

GNG999, функции с выводом then1 и then2 не добавляются в очередь микротасков только потому, что ты передал их в then.
Чтобы они сразу стали микротасками, их надо передать в then уже зарезолвленного промиса:

Promise.resolve().then(() => console.log('then1')).then(() => console.log('then2'))

надо заметить, что этот код выше создает только один микротаск (для "then1"). Второй будет создан, когда функция "then1" отработает.

В твоем случае "then1" попадает в микротаски, только когда промис зарезолвится.

Отметим так же, что передача функции в setTimeout так же не закидывает её сразу в event-loop, а только в таймеры. А уже таймер по завершении создаст таск для этой функции. Впрочем, для твоего примера это несущественно. Просто как лишнее напоминание, что таски и микротаски не всегда создаются сразу же.