Javascript事件循环， 这让大多数的开发者起初理解起来都会有些混乱。
本文将以低分辨率的gif图像以视觉方式进行解释，希望帮助到需要的朋友。
但是首先，事件循环是什么，为什么要关心呢？
JavaScript是单线程的：一次只能运行一个任务。 通常，这没什么大不了的，但是现在想象您正在运行一个耗时30秒的任务。
是的，在此任务中，我们等待30秒才能进行其他任何操作（默认情况下，JavaScript在浏览器的主线程上运行， 因此整个用户界面都停滞了）?到了2019年，没有人想要一个速度慢，反应迟钝的网站。
幸运的是，浏览器为我们提供了JavaScript引擎本身不提供的一些功能：Web API。 这包括DOM API，setTimeout，HTTP请求等。 这可以帮助我们创建一些异步的，非阻塞的行为。
当我们调用一个函数时，它会被添加到称为调用栈的东西中。 调用堆栈是JS引擎的一部分，不是特定于浏览器的。 它是一叠，意味着先入先出。 当一个函数返回一个值时，它会从堆栈中弹出?
响应函数返回一个setTimeout函数。 setTimeout是由Web API提供给我们的：它使我们可以延迟任务而不会阻塞主线程。 我们传递给setTimeout函数的回调函数，箭头函数（）=> {return’Hey’}已添加到Web API。 同时，setTimeout函数和response函数从堆栈中弹出，它们都返回了它们的值！
在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();
理解了吗？ 让我们快速看一下在浏览器中运行此代码时发生的情况：
- 我们调用bar， bar返回setTimeout函数。
- 我们传递给setTimeout的回调被添加到Web API，setTimeout函数和bar从调用栈中弹出。
- 计时器运行，同时foo被调用并打印First。 foo返回（未定义），调用baz，并将回调添加到队列中。
- baz打印Third。 事件循环看到baz返回后，调用栈为空，然后将回调添加到调用栈中。
- 回调打印Second。
希望这会帮助大家理解事件循环！
