考虑以下代码:

function foo() {
    console.log('foo');

    new Promise(
        function(resolve, reject) {
            setTimeout(function() {
                resolve('RESOLVING');
            }, 5000);
        }
    )
    .then(
        function(value) {
            console.log(value);
        }
    );
}
foo();

我试图正确理解这里发生的事情:

1. 在执行 new Promise 时，“executer function”直接运行，当 setTimeout 被调用时，安排一个操作将新条目添加到“事件队列” (5 秒后)
2. 因为调用 then 一个添加到“作业队列”的操作，所以对传递函数的调用(记录到控制台)被安排在 Promise<> 已解决
3. 当 setTimeout 回调被执行时(在事件循环的某个时刻)，Promise 被解析并且基于第 2 点， 的函数参数>then 调用被添加到“作业队列”并随后执行。

请注意，我说 [a "job queue"] 是因为有些事情我不确定；哪个“工作队列是它？”。按照我的理解，“作业队列”链接到“事件队列”上的条目。那会是上面例子中的 setTimeout 条目吗？ 假设在添加 setTimeout 的回调之前(和之后)没有其他事件被添加到“事件队列”，那么主代码的条目(对 foo 的调用)是否已经(通常) 到那时已经消失(运行完成)，因此除了 setTimeout 之外没有其他条目用于 then 的“作业队列”条目被链接到？

最佳答案

1. on executing new Promise the "executer function" is run directly and when setTimeout is called, an operation to add a new entry to the "event queue" is scheduled (for 5 seconds later)

是的。更具体地说，调用 setTimeout 使用浏览器的定时器机制安排一个定时器；大约五秒钟后，计时器机制将一个作业添加到主作业队列，它将调用您的回调。

2. because of the call to then an operation to add to a "job queue" a call to the passed function (which logs to the console) is organised to happen after the Promise is resolved

没错。 then(使用单个参数)向 promise 添加一个履行处理程序(并创建它返回的另一个 promise)。当 promise 解决时，调用处理程序的作业将添加到作业队列(但它是一个不同的作业队列)。

3. when the setTimeout callback is executed (on some tick of the event loop), the Promise is resolved and based on point 2, the function argument to the then call is added to a "job queue" and subsequently executed.

是的，但它不是同一个作业队列。 :-)

主要的作业队列是事件处理程序和计时器回调之类的地方。主事件循环从队列中选择一个作业，运行它直到完成，然后选择下一个作业，等等，如果没有要运行的作业则空闲。

一旦一个作业运行完成，另一个循环开始运行，它负责运行在该主要作业期间安排的任何待定 promise 作业。

在JavaScript规范中，主作业队列称为ScriptJobs，promise回调作业队列为PromiseJobs。在 ScriptJob 结束时，在下一个 ScriptJob 之前执行所有已排队的 PromiseJob。 (在 HTML 规范中，它们的名称是“task”[或“macrotask”] 和“microtask”。)

是的，这确实意味着如果作业 A 和作业 B 都在排队​​，然后作业 A 被选中并安排一个 promise 回调，那么 promise 回调将在作业 B 运行之前运行，即使作业 B 先排队(在主队列中)。

Notice I say [a "job queue"] because there is something I am not sure about; which "job queue is it?"

希望我在上面涵盖了这一点。基本上:

• 初始脚本执行、事件处理程序、计时器和 requestAnimationFrame 回调排队到 ScriptJobs 队列(主要队列)；它们是“宏任务”(或简称为“任务”)。
• Promise 回调在 PromiseJobs 队列中排队，该队列在任务结束时处理直到为空。也就是说， promise 回调是“微任务”。

The way I understand it, a "job queue" is linked to an entry on the "event queue".

这些只是同一事物的不同名称。 JavaScript 规范使用术语“作业”和“作业队列”。 HTML 规范使用“任务”、“任务队列”和“事件循环”。事件循环是从 ScriptJobs 队列中获取作业的。

So would that be the setTimeout entry in above example?

当计时器触发时，作业会在 ScriptJobs 队列中安排。

Assuming no other events are added to the "event queue" before (and after) setTimeout's callback is added, wouldn't the entry for the main code (the call to foo) have been (usually) gone (run to completion) by that time and thus there would be no other entry than setTimeout's for the then's "job queue" entry to be linked to?

基本上是的。让我们把它跑下来:

• 浏览器加载脚本并向 ScriptJobs 添加作业以运行脚本的顶级代码。
• 事件循环选择该作业并运行它:
  • 该代码定义了 foo 并调用了它。
  • 在 foo 中，您执行 console.log，然后创建 promise 。
  • promise 执行器安排一个计时器回调:将计时器添加到浏览器的计时器列表中。它还没有对作业进行排队。
  • then 将履行处理程序添加到 promise 中。
  • 那份工作结束了。
• 大约五秒钟后，浏览器会向 ScriptJobs 添加一个作业来调用您的计时器回调。
• 事件循环选择该作业并运行它:
  • 回调解决了 promise ，它向 PromiseJobs 队列添加了 promise 履行处理程序调用。
  • 该作业结束，但在 PromiseJobs 中有条目，因此 JavaScript 引擎按顺序循环遍历这些条目:
    • 它选择履行处理程序回调作业并运行它；该履行处理程序执行 console.log
  • 这项工作现在已完全完成。

更多探索:

• Jobs and Job Queues in the JavaScript specification
• Event Loops in the HTML5 specification

关于javascript promises、事件循环和作业队列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55676922/