[译]JavaScript️可视化：事件循环

时间 2020-01-18

原文原文链接

本系列包括6篇文章javascript

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

可是首先，事件循环是什么，为何要关心呢？git

JavaScript是单线程的：一次只能运行一个任务。一般，这没什么大不了的，可是如今想象您正在运行一个耗时30秒的任务。是的。在此任务中，咱们等待30秒才能进行其余任何操做（默认状况下，JavaScript在浏览器的主线程上运行，所以整个用户界面都停滞了）😬到了2019年，没有人想要一个速度慢，反应迟钝的网站。github

幸运的是，浏览器为咱们提供了JavaScript引擎自己不提供的一些功能：Web API。这包括DOM API，setTimeoutHTTP请求等。这能够帮助咱们建立一些异步的，非阻塞的行为 🚀浏览器

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

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

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

这多是一个使人困惑的部分：这并不意味着在1000毫秒后将回调函数添加到调用堆栈中（从而返回一个值）！它只是在1000毫秒后添加到队列中。但这是一个队列，该函数必须等待轮到它！学习

如今这是咱们一直在等待的部分……是时候让事件循环执行其惟一的任务了：将队列与调用堆栈链接起来！!若是调用堆栈为空，即若是全部先前调用的函数都返回了它们的值并已从堆栈中弹出，则队列中的第一项将添加到调用堆栈中。在这种状况下，没有其余函数被调用，意味着当回调函数成为队列中的第一项时，调用堆栈为空。网站

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

知识点讲完了，我们来作道题：

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。

我的博客

github.com/abc-club/fr…