本系列

正文

哦,事件循环。这是每个JavaScript开发人员都必须以一种或另一种方式处理的事情之一,但是起初理解起来可能有些混乱。我是一个视觉学习者,所以我想我会尝试通过gifs来帮助您。

但是首先,事件循环是什么,为什么要关心呢?

JavaScript是单线程的:一次只能运行一个任务。通常,这没什么大不了的,但是现在想象您正在运行一个耗时30秒的任务。是的。在此任务中,我们等待30秒才能进行其他任何操作(默认情况下,JavaScript在浏览器的主线程上运行,因此整个用户界面都停滞了)?到了2019年,没有人想要一个速度慢,反应迟钝的网站。

幸运的是,浏览器为我们提供了JavaScript引擎本身不提供的一些功能:Web API。这包括DOM API,setTimeoutHTTP请求等。这可以帮助我们创建一些异步的,非阻塞的行为 ?

当我们调用一个函数时,它会被添加到称为调用栈的东西中。调用堆栈是JS引擎的一部分,这不是特定于浏览器的。它是一个堆栈,这意味着它是先进先出的(例如一堆煎饼)。当一个函数返回一个值时,它会从堆栈中弹出?

respond函数返回一个setTimeout函数。在setTimeout由Web API提供给我们:它让我们拖延的任务,而不会阻塞主线程。我们传递给该setTimeout函数的回调函数,箭头函数() => { return 'Hey'}已添加到Web API。同时,setTimeout函数和respond函数从堆栈中弹出,它们都返回了它们的值!

在Web API中,计时器的运行时间与我们传递给它的第二个参数1000ms一样长。回调不会立即添加到调用堆栈中,而是会传递给称为队列的东西。

这可能是一个令人困惑的部分:这并不意味着在1000毫秒后将回调函数添加到调用堆栈中(从而返回一个值)!它只是在1000毫秒后添加到队列中。但这是一个队列,该函数必须等待轮到它!

现在这是我们一直在等待的部分……是时候让事件循环执行其唯一的任务了:将队列与调用堆栈连接起来!!如果调用堆栈为空,即如果所有先前调用的函数都返回了它们的值并已从堆栈中弹出,则队列中的第一项将添加到调用堆栈中。在这种情况下,没有其他函数被调用,意味着当回调函数成为队列中的第一项时,调用堆栈为空。

回调被添加到调用堆栈中,被调用,并返回一个值,并从堆栈中弹出。

知识点讲完了,咱们来做道题:

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

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

复制代码

得到它了?让我们快速看一下在浏览器中运行此代码时发生的情况:

  1. 我们调用bar。bar返回一个setTimeout函数。
  2. 我们传递给的回调setTimeout被添加到Web API,该setTimeout函数中,并且bar从调用堆栈中弹出。
  3. 计时器运行,同时foo调用并打印First。foo返回(未定义),baz被调用,并将回调添加到队列中。
  4. baz打印Third。事件循环看到baz返回后调用栈为空,然后将回调添加到调用栈。
  5. 回调日志Second。

原文

个人博客

github.com/abc-club/fr…