javascript毫秒计时器_「翻译」JavaScript的可视化学习之一：事件循环

最新推荐文章于 2022-09-23 11:12:19 发布

眉浅穹跪

最新推荐文章于 2022-09-23 11:12:19 发布

阅读量145

点赞数

文章标签： javascript毫秒计时器

本文链接：https://blog.csdn.net/weixin_33478314/article/details/112399527

版权

只是忍他、让他、由他、避他、耐他、敬他、不要理他、再待几年，你且看他，等他空了，你再出来蹦跶蹦跶。 - 耗不死ta的Event Loop

事件循环的概览图。

请注意上面这张图，事件循环的那些事，将在这个图上缓缓展开。

事件循环(Event Loop)，怎么说呢，每个Javascript开发者都必须要经过它的蹂躏。初次见面，你会觉得它令人迷惑难以理解。我是一个视觉型学习者，所以我尝试用视觉的方式来搞定它，没错，视觉的方式，就是那种低像素的gif图片 - 现在是9012年了，gif还走在像素化的世界里用格子画马里奥。

那么，什么是事件循环，我们又为什么要关注它呢？

JavaScript是以单线程的方式运行的：同一时间只能做一件事。通常情况下，这也没啥大不了的，但是假设现在要运行一个任务，这个任务要跑30秒......在任务运行的这30秒内，我们什么都干不了(JavaScript默认和UI渲染占用浏览器的主线程，当JavaScript在惬意的奔跑30秒时，UI渲染只能苦苦等待而被阻断，也就是我们见到的页面卡顿)。现在都什么年代了，一个卡顿、点击没响应的网站是吸引不了用户的。

幸运的是，浏览器给我们打开了一扇窗，它提供了一些JavaScript引擎本身没有的特性：Web API，包括`DOM API`，`setTimeout`，`HTTP requests`等等。这些可以帮助我们来创建异步的，不会被阻断的行为。

当我们调用一个函数时，函数会被压入堆栈。堆栈不是浏览器特有的东西，它是JavaScript引擎的一部分。堆栈，顾名思义就是一个栈，遵循着先进后出的原则(想象一下，一叠烙饼是怎么来的，又是怎么没的)。当这个函数返回时，它会被从栈里抛出去。

1、函数执行时，压入堆栈，执行完抛出堆栈。

上图的`respond`函数返回了一个`setTimeout`函数，`setTimeout`由`Web API`提供：它可以让任务延迟执行，而且不会阻碍主线程。箭头函数`() => { return 'Hey' }`作为回调函数，传递给`setTimeout`，然后会被添加到`Web API`中。同时，`setTimemout`和`respond`函数都被抛出了堆栈，而且他们都返回了自己的值。

2、浏览器提供setTimeout，Web API负责回调函数。

在`Web API`中，当第二个参数，`1000毫秒`被传递过去时，一个计时器就开始运行。此时这个回调函数不会马上被添加到堆栈中执行，它会被先添加到一个队列中。

3、计时器完成时，添加回调函数到回调函数队列。

这里是让人容易迷惑的地方：1000毫秒后，回调函数并不会被添加到堆栈，它只是被简单的添加到了一个队列中，然后，等待着被叫号。

现在到了我们期待已久的时刻，事件循环要开始它唯一的使命：连接队列和堆栈。如果堆栈是空的，所有以前被调用的函数已经返回并且从堆栈中抛出，那么把队列中的第一个添加到堆栈中。此时没有别的函数被调用，意味着当回调函数成为队列中的第一个时，堆栈是空的。

4、事件循环发现堆栈为空，添加队列第一项到堆栈中。

回调函数被添加到堆栈后，执行，然后返回，最后被抛出堆栈。

5、回调函数添加到堆栈，执行，返回，最终抛出堆栈。

纸上得来终觉浅，绝知此事要躬行。看看以下代码最终会输出什么：

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

理解了没？让我们来快速看一下，这段代码在浏览器中运行时发生了什么：