JavaScript 为什么 Promise 的内部 setTimeout 在外部 setTimeout 之后运行

Question

运行以下代码片段时，它会输出2,1 。 由于 Promise 是一个微任务，并且 promise 中的所有内容都应该在宏任务（setTimeout）之前运行，我预计 output 将是1,2 。 因此，即使微任务中有宏任务，我认为 output 也会是1,2 。

但它输出2,1 。

这里有什么问题？ 为什么它输出2,1而不是1,2 ？

Promise.resolve().then(() => {
    setTimeout(() =>{
    console.log("1")
 }, 0)
})

setTimeout(() => {
    console.log("2")
}, 0)

Answer 1

promise 是一个微任务，将在timeout1之前执行，但timeout1已经安排为宏任务。

当 promise 解决时， timeout2将被调度，但宏任务 Q 已经有timeout1 ，因此这已经被调度并将首先执行。

Answer 2

这是 Eventloop（我见过的最好的解释）： https://youtu.be/cCOL7MC4Pl0?t=487

 console.log("1") Promise.resolve().then(() => { console.log("4") setTimeout(() =>{ console.log("7") }, 0) console.log("5") }) console.log("2") setTimeout(() => { console.log("6") }, 0) console.log("3")

剪辑可能会帮助您理解它

Promis.resolve().then() 与 setTimout(0) 的作用相同，因此您基本上在 timout 中写入超时，因此 eventloop 必须循环两次

Answer 3

 Promise.resolve().then(/* 1. */() => { setTimeout(/* 4. */() => { console.log("1") /* 8. */ }, 0) /* 5. */ }) setTimeout(/* 2. */() => { console.log("2") /* 6. */ /* 7. */ }, 0) /* 3. */

1. 以下任务被添加到微任务队列中。 我们称它为“micro1”：

    () => { setTimeout(() => { console.log("1") }, 0) }

   任务队列看起来像

   • 微：[微1]
   • 宏：[]

2. 计划了以下宏任务。 我们称它为“macro1”

    () => { console.log("2") }

   任务队列如下所示：

   • 微：[微1]
   • 宏：[宏1]

3. 代码完成执行。 事件循环选择下一个任务。 Microtask 队列有一个优先级，下一个要执行的任务是 micro1。

4. 计划了以下宏任务。 让我们称之为“macro2”

    () => { console.log("1") }

   超时为零，因此无需等待。 队列是先进先出的，因此任务 macro2 被添加到末尾。 没有更高的优先级仅仅因为它来自微任务或类似的东西。

   任务队列如下所示：

   • 微： []
   • 宏：[宏1，宏2]

5. 任务执行完毕。 事件循环选择下一个任务。 微任务队列是空的，因此它从宏任务队列中挑选一个任务。 下一个要执行的任务是宏 1。

6. 该任务将"2"打印到控制台。

7. 任务执行完毕。 事件循环选择下一个任务。 微任务队列是空的，因此它从宏任务队列中挑选一个任务。 下一个要执行的任务是宏 2。

8. 该任务将"1"打印到控制台。