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() returns 就可以返回事件队列。因此，由于 fetch().then() 是非阻塞的并且占用非零时间，当您第一次返回事件队列时，只有 setTimeout() 准备就绪。网络操作仍将在后台进行。

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

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

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

end
timeout done
promise

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

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

setTimeout performing before a task in micro task queue (Job queue)

javascript

asynchronous

callback

es6-promise

ecmascript-2016