Java Script 的回调和微任务队列

Question

p1 = new Promise((res,rej)=>{
    console.log("p1 setTimeout");
    setTimeout(()=>{
      res(17);
    }, 10000);
});

p2 = new Promise((res,rej)=>{
    console.log("p2 setTimeout");
    setTimeout(()=>{
      res(36);
    }, 2000);
});

function checkIt() {
    console.log("Started");

    let val1 = this.p1;
    console.log("P1");
    val1.then((data)=>{console.log("P1 => "+data)});

    let val2 = this.p2;
    console.log("P2");
    val2.then((data)=>{console.log("P2 => "+data)});

    console.log("End");
}

checkIt();

我对上面写的JavaScript代码的理解是：

1：在回调队列中，先p2的setTimeout，然后p1的setTimeout（并且它们将以先进先出的方式执行）

2：回调队列不会在微任务队列之前执行

3：在微任务队列中，p1的回调函数会先执行，然后是p2的回调函数（并且会以先进先出的方式执行）

4：因此这应该是僵局。

但是得到输出：

1：p1设置超时

2：p2设置超时

3：开始

4：P1

5：P2

6：结束

7：（2秒后）P2 => 36

8：（10秒后）P1 => 17

疑惑：第7行和第8行输出是怎么来的？

我已经运行了代码并获得了上面定义的输出

Answer 1

setTimeout

在超时后创建一个新的宏任务排队到事件循环中，因此您的承诺在不同的宏任务中排队并且完全没有关系。