摘要：同时，如果执行的过程中发现其他函数，继续入栈然后执行。上面我们讨论的其实都是同步代码，代码在运行的时候只用调用栈解释就可以了。
序
Event Loop 这个概念相信大家或多或少都了解过，但是有一次被一个小伙伴问到它具体的原理的时候，感觉自己只知道个大概印象，于是计划着写一篇文章，用输出倒逼输入，让自己重新学习这个概念，同时也能帮助更多的人理解它~
概念JavaScript 是一门 单线程 语言，即同一时间只能执行一个任务，即代码执行是同步并且阻塞的。
eg. 这就像只有一个窗口的银行，客户需要一个一个排队办理业务。
只能同步执行肯定是有问题的，所以 JS 有了一个用来实现异步的函数：setTimeout
下面要讲的 Event Loop 就是为了确保 异步代码 可以在 同步代码 执行后继续执行的。
由于涉及到的相关概念较多，我们先从最简单的来。
队列（Queue）队列 是一种 FIFO(First In, First Out) 的数据结构，它的特点就是 先进先出
eg. 生活中最常见的例子就是排队啦，排在队伍最前面的人最先被提供服务。栈（Stack）
栈 是一种 LIFO（Last In, First Out）的数据结构，特点即 后进先出。
eg. 大家都吃过桶装薯片吧~薯片在包装的时候只能从顶部放入，而吃的时候也只能从顶部拿出，这就叫后进先出哈调用栈（Call Stack）
栈我们已经知道了，那么什么是 调用栈 呢 ？
它本质上当然还是个栈啦 废话，关键在于它里面装的东西，是一个个待执行的函数。
Event Loop 会一直检查 Call Stack 中是否有函数需要执行，如果有，就从栈顶依次执行。同时，如果执行的过程中发现其他函数，继续入栈然后执行。
先拿两个函数来说：
栈空
现在执行到一个 函数A，函数A 入栈
函数A 又调用了 函数B，函数B 入栈
函数B 执行完后 出栈
然后继续执行 函数A，执行完后A也 出栈
栈空
更复杂一点的话，来看一段代码：
这段代码在 调用栈中的运行顺序如下图：
这个调用栈其实大家经常会见到，就是在控制台报错的时候，错误信息显示的就是当前时刻调用栈的状态。
But, 上面我们讨论的其实都是同步代码，代码在运行的时候只用 调用栈 解释就可以了。
那么，假如我们发起了一个网络请求(request)，或者设置了一个定时器延时(setTimeout)，一段时间后的代码（回调函数）肯定不是直接被加到调用栈吧？
这时就要引出 事件表格（Event Table） 和 事件队列 (Event Queue) 了
Event TableEvent Table 可以理解成一张 事件->回调函数 对应表
它就是用来存储 JavaScript 中的异步事件 (request, setTimeout, IO等) 及其对应的回调函数的列表Event Queue
Event Queue 简单理解就是 回调函数 队列，所以它也叫 Callback Queue
当 Event Table 中的事件被触发，事件对应的 回调函数 就会被 push 进这个 Event Queue，然后等待被执行Event Loop
先来看一个流程图：
开始，任务先进入 Call Stack
同步任务直接在栈中等待被执行，异步任务从 Call Stack 移入到 Event Table 注册
当对应的事件触发（或延迟到指定时间），Event Table 会将事件回调函数移入 Event Queue 等待
当 Call Stack 中没有任务，就从 Event Queue 中拿出一个任务放入 Call Stack
而 Event Loop 指的就是这一整个圈圈：
它不停检查 Call Stack 中是否有任务（也叫栈帧）需要执行，如果没有，就检查 Event Queue，从中弹出一个任务，放入 Call Stack 中，如此往复循环。
好啦，不知道有没有看明白呢？放一张更经典的图：
其中与 Event Queue 对应的还有一个叫 Job Queue，它主要是用来执行 Promise 的，这两种 Queue 有什么区别呢？
这就涉及到 宏任务 (macro task) 和 微任务 (micro task) 了，我们放在下篇再讲~
参考文章原文链接
MDN EventLoop
javascript-event-loop
understanding-js-the-event-loop
这一次，彻底弄懂JavaScript执行机制
understanding-event-loop-call-stack-event-job-queue-in-javascript
欢迎关注我的公众号：码力全开
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109906.html
摘要：常见应用则是为了完成一些更新应用程序状态的较小的任务，如处理的回调和的修改，以便让这些任务在浏览器重新渲染之前执行。常见应用执行顺序的实现需要至少一个和至少一个。 简介 我们在上一篇 《浅析 JS 中的EventLoop 事件循环》 中提到一个 Event Queue，其实在事件循环中 queue 一共有两种，还有一种叫 Job Queue 其中 Event Queue 在 HTML...
摘要：前沿是基于引擎的运行环境具有事件驱动非阻塞等特点结合具有网络编程文件系统等服务端的功能用库进行异步事件处理线程的单线程含义实际上说的是执行同步代码的主线程一个程序的启动不止是分配了一个线程，而是我们只能在一个线程执行代码当出现资源调用连接等 前沿 Node.js 是基于V8引擎的javascript运行环境. Node.js具有事件驱动, 非阻塞I/O等特点. 结合Node API, ...
摘要：事件循环当进程启动时，会创建一个循环，每个循环通过内部的观察者来查看是否有事件需要处理，如果有就取出事件和它相关的回调函数去执行，执行完以后就进入下一个循环，如果不再有就退出进程。 前言 在学习eventloop之前，我们需要复习一下js的单线程和异步。虽说js是单线程的，但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers（工作线程），Node中的child_...
摘要：事件循环当进程启动时，会创建一个循环，每个循环通过内部的观察者来查看是否有事件需要处理，如果有就取出事件和它相关的回调函数去执行，执行完以后就进入下一个循环，如果不再有就退出进程。 前言 在学习eventloop之前，我们需要复习一下js的单线程和异步。虽说js是单线程的，但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers（工作线程），Node中的child_...
摘要：事件循环当进程启动时，会创建一个循环，每个循环通过内部的观察者来查看是否有事件需要处理，如果有就取出事件和它相关的回调函数去执行，执行完以后就进入下一个循环，如果不再有就退出进程。 前言 在学习eventloop之前，我们需要复习一下js的单线程和异步。虽说js是单线程的，但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers（工作线程），Node中的child_...
阅读 1743·2021-10-19 13:30
阅读 1307·2021-10-14 09:48
阅读 1487·2021-09-22 15:17
阅读 1987·2019-08-30 15:52
阅读 3245·2019-08-30 11:23
阅读 1955·2019-08-29 15:27
阅读 866·2019-08-29 13:55
阅读 737·2019-08-26 14:05
