setTimeout在微任务队列中的任务之前执行（作业队列）

Question

我无法理解为什么我的代码在下面依次记录以下内容：“end”“timeout done”“promise”

我假设“promise”会在“timeout done”之前记录，因为它优先于回调队列任务（setTimeout）。我在这个观察之后的假设是，直到.then被调用，promise才会将其任务排队，因为它还没有准备就绪，因此允许setTimeout在回调队列中执行以便首先执行。它是否正确？

const sampleFunction = function(e) {
  setTimeout(() => console.log('timeout done'), 0)
  const data = fetch(`https://jsonplaceholder.typicode.com/comments/1`)
  .then(response => {
    return response.json();
  })
  .then(json => {
    /*doSomething*/
    console.log('promise')
  });
  console.log('end')
}

Answer 1

你的console.log('promise')必须等到你的fetch().then()完成，这涉及到另一个主机的网络操作（因此非零时间）。

你的setTimeout()只需要等到sampleFunction()返回并返回事件队列。所以，由于fetch().then()是非阻塞的并且花费非零时间，当你第一次回到事件队列时，只有setTimeout()准备好了。网络操作仍将在后台进行。

所以，这不是优先次序的问题。这是完成顺序的问题。在setTimeout()承诺解决之前很久，fetch()将其完成事件插入到事件队列中。

也许你没有意识到fetch()是非阻塞的，调用它只是启动操作然后你的代码执行继续吗？

在控制台中，您应该看到：

end
timeout done
promise

只要您的fetch()没有任何错误。