事件循环
但是首先,事件循环是什么,为什么要关心呢?
JavaScript 是 单线程的:一次只能运行一个任务。
通常,这没什么大不了的,但是现在想象你正在运行一个耗时 30 秒的任务。
在此任务中,我们等待 30 秒才能进行其他任何操作(默认情况下,JavaScript 在浏览器的主线程上运行,因此整个用户界面都停滞了)😬 。
都到 2020 年了,没有人想停留在一个速度慢,交互反应迟钝的网站。
幸运的是,浏览器为我们提供了JavaScript 引擎本身不提供的一些功能:Web API。
这包括 DOM API,setTimeout HTTP 请求等,这可以帮助我们创建一些异步的,非阻塞的行为。
当我们调用一个函数时,它会被添加到称为 调用栈 的数据结构中。
调用栈是 JS 引擎的一部分,这不是特定于浏览器的。
它是一个调用栈,这意味着它是 先进先出 的(例如一堆煎饼)。
当一个函数返回一个值时,它会从调用栈中弹出 👋。
该 respond 函数返回一个 setTimeout 函数。
在 setTimeout 由 Web API 提供给我们:它让我们拖延的任务,而不会阻塞主线程。
我们传递给该 setTimeout 函数的回调函数,箭头函数 () => { return “Hey” } 已添加到 Web API。
同时,该 setTimeout 函数和 response 函数从调用栈中弹出,它们都返回了它们的值!
在 Web API中,计时器的运行时间与我们传递给它的第二个参数 1000ms 一样长。回调不会立即添加到调用栈中,而是会传递给称为队列的东西。
这可能是一个令人困惑的部分:这并不意味着在 1000 毫秒后将回调函数添加到调用栈中(从而返回一个值)!它只是在 1000 毫秒后添加到 队列中。但这是一个队列,该功能必须等待轮到它!
接下为是我们一直在等待的重点内容……
让事件循环执行其唯一的任务了:将队列与调用栈连接起来!如果调用栈为 空,那么如果所有先前调用的函数都返回了它们的值并已从堆栈中弹出,则队列中的 第一项 将添加到调用栈中,在这种情况下,没有其他函数被调用,这意味着当回调函数成为队列中的第一项时,调用栈为空。
回调被添加到调用栈中,被调用,并返回一个值,并从调用栈中弹出。
例子
阅读一篇文章很有趣,但是通过反复地实际操作,你会对此理解得更深。
如果运行以下 js,请想一下控制台会输出什么内容:
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
想出答案了吗?
让我们快速看一下在浏览器中运行此代码时发生的过程:
我们调用 bar,bar 返回一个 setTimeout 函数。
我们传递给的回调 setTimeout 被添加到 Web API,该 setTimeout 函数中,并 bar 从调用堆栈中弹出。
计时器运行,同时 foo 调用并记录 First,foo 返回(未定义),baz 被调用,并将回调添加到队列中。
baz 输出 Third,事件循环看到 baz 返回后调用栈为空,然后将回调添加到调用栈。
回调再打印出 Second。
原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
原文作者:Lydia Hallie
译者:夜尽天明