选择篇(038)-下面代码的输出是什么?

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");

bar();
foo();
baz();

• A: First Second Third
• B: First Third Second
• C: Second First Third
• D: Second Third First

答案: B

我们有一个setTimeout函数并首先调用它。然而却最后打印了它。

这是因为在浏览器中，我们不只有运行时引擎，我们还有一个叫做WebAPI的东西。WebAPI为我们提供了setTimeout函数，例如DOM。

将callback推送到WebAPI后，setTimeout函数本身（但不是回调！）从堆栈中弹出。

现在，调用foo，并打印First。

foo从堆栈弹出，baz被调用，并打印Third。

WebAPI不能只是在准备就绪时将内容添加到堆栈中。相反，它将回调函数推送到一个称为任务队列的东西。

这是事件循环开始工作的地方。 事件循环查看堆栈和任务队列。如果堆栈为空，则会占用队列中的第一个内容并将其推送到堆栈中。

bar被调用，Second被打印，它从栈中弹出。