javascript中Promise异步运行顺序问题。

Question

有这么一段代码，我不太理解它内部运行的顺序，chrome打印的结果为 1 2 4 3，不看结果时我的想法是 1 4 2 3，以为第二个then的任务会先于第一个then里面的promise.then，现在看来并不是如此，希望有人可以帮忙解释一下。

        Promise.resolve()
        .then(() => {
            console.log(1);
            Promise.resolve()
            .then(() => console.log(2))
            .then(() => console.log(3))
        })
        .then(() => console.log(4))

被我编辑了一下之后，以下的代码又有这样的结果（以1 2 3 4 5 6 7 8 9 10的顺序打印），发现打印会穿插着进行，本人实在找不到原因了。

        Promise.resolve()
        .then(() => {
            console.log(1);
            Promise.resolve()
            .then(() => console.log(2))
            .then(() => console.log(4))
            .then(() => console.log(6))
            .then(() => console.log(8))
            .then(() => console.log(10))
        })
        .then(() => console.log(3))
        .then(() => console.log(5))
        .then(() => console.log(7))
        .then(() => console.log(9))

Answer 1

参考这里 关于Promise规范与执行顺序的问题

Answer 2

首先，传递给 Promise 的任务是按加入队列的顺序执行的。第一个 Promise 已完成，所以 1 可以入队跑了（PerformPromiseThen 第10步）。后边那个打印 4 的 then，因为其 this 还没结束，所以按第9步先放着（不是加入队列准备跑）。

每一轮执行过程如下：

• 1 准备跑，别的都还不能动（或者还没生成）
• 1 开跑。2 准备跑。1 跑完了，所以 4 也准备跑。
• 2 开跑并跑完，3 准备跑。4 开跑。这一步队列里有两个函数 2 和 4，都要先跑完。
• 3 开跑。

也就是谁先准备好，下一轮谁先跑。

Answer 3

我大概明白你的疑惑：

• 首先，要理解的是 then 入队列的顺序，Promise 完成之后，then 开始入队列。
• 然后，then 调用链的入队顺序，then 调用后会返回一个新的 Promise，然后再链接 then。
• then 返回的新 Promise 什么时候完成呢？上一个 then 的回调函数执行完成，所以 第一个 then 里面的 Promise.resolve() 先完成，所以 2 比 4 先入队列。