Eventloop事件循环机制
第一次录文章的话，是有点小激动！哈哈哈 主要是看了一篇关于朋友分享的Eventloop，然后加上他独特的见解，所以之后说的理解其实有一半受了他的感悟
如果有什么地方说的不合适的话，请多多发我消息，不胜感谢！ 
进入话题
首先理解的话我们一起思考思考问题，因为我觉着一旦出现某种方法，一定是为了解决某种事情才会出的方法。
1 . js为什么是单线程
* js是单线程操作我相信大家并不模式，但是为什么大佬要做成单线程内
* js刚开始主要是表格提交方面的需求，直接浏览器上做验证，直接过滤了一大片不合格的信息，大大的减少了服务器的压力，但是试想一下，如果多个用户再同时操作增删改，那js该判断执行增 还是删 还是改，顿时突然发现出门不用带伞了。（大头大头下雨不愁）头大了俩圈！
所以js是单线程的目的，但是紧接着问题又来了。
2 . 要是上一个任务一直没执行完怎么办？
* 就好像我去超市买东西，去前台付款，结果好家伙，前面那个人占着坑位疯狂输出，关键是我都不知道他还要多久才能结束战斗，然后我还要等他结束了我才能结账，此时心里有几个字差点憋不住了。
* 此时就有个好东西诞生了，同步任务 和 异步任务
* 而同步任务和异步任务最主要的差别就是，同步任务发起调用后，很快就可以得到结果，而异步任务是无法立即得到结果，比如请求接口，每个接口都会有一定的响应时间，根据网速、服务器等等因素决定，再比如定时器，它需要固定时间后才会返回结果。（这里的例子跟上面排队超市买东西是一样的）
众所周知队列是先进先出，但是我有种情况就是后进先出，没错！就是想插队！
比如队列先进入一个一小时的定时器，接着再进入一个请求接口函数，而如果根据进入队列的顺序执行的话，请求接口函数可能需要一个小时后才会响应数据。
因此浏览器就会将异步任务分为宏任务和微任务，然后按照事件循环的机制去执行，因此不同的任务会有不同的执行优先级。
事件循环 Eventloop
讲完了之前的一系列引出的问题，现在终于到了事件循环了！
事件循环具体流程：
从宏任务队列中，按照入队顺序，找到第一个执行的宏任务，放入调用栈，开始执行；
执行完该宏任务下所有同步任务后，即调用栈清空后，该宏任务被推出宏任务队列，然后微任务队列开始按照入队顺序，依次执行其中的微任务，直至微任务队列清空为止；
当微任务队列清空后，一个事件循环结束；
接着从宏任务队列中，找到下一个执行的宏任务，开始第二个事件循环，直至宏任务队列清空为止。
这里有几个重点：
当我们第一次执行的时候，解释器会将整体代码
script放入宏任务队列中，因此事件循环是从第一个宏任务开始的；如果在执行微任务的过程中，产生新的微任务添加到微任务队列中，也需要一起清空；微任务队列没清空之前，是不会执行下一个宏任务的。
接下来就是我们最喜欢的看图环节了！
接下来，通过一个常见的面试题例子来模拟一下事件循环。
console.log("a")setTimeout(function () {console.log("b")
},0)new Promise((resolve) => {console.log("c")resolve()
}).then(function () {console.log("d")
}).then(function () {console.log("e")
})console.log("f")// 执行结果 a c f d e b首先，当代码执行的时候，整体代码script被推入宏任务队列中，并开始执行该宏任务。
按照代码顺序，首先执行console.log("a")。
该函数上下文被推入调用栈，执行完后，即移除调用栈。
接下来执行setTimeout()，该函数上下文也进入调用栈中。
因为setTimeout是一个宏任务，因此将其callback函数推入宏任务队列中，然后该函数就被移除调用栈，继续往下执行。
紧接着是Promise语句，先将其放入调用栈，然后接着往下执行。
执行console.log("c")和resolve()，这里就不多说了。
接着来到new Promise().then()方法，这是一个微任务，因此将其推入微任务队列中。
这时new Promise语句已经执行结束了，就被移除调用栈。
接着做执行console.log('f')。
这时候，script宏任务已经执行结束了，因此被推出宏任务队列。
紧接着开始清空微任务队列了。首先执行的是Promise then，因此它被推入调用栈中。
然后开始执行其中的console.log("d")。
执行结束后，检测到后面还有一个then()函数，因此将其推入微任务队列中。
此时第一个then()函数已经执行结束了，就会移除调用栈和微任务队列。
此时微任务队列还没被清空，因此继续执行下一个微任务。
执行过程跟前面差不多，就不多说了。
此时微任务队列已经清空了，第一个事件循环已经结束了。
接下来执行下一个宏任务，即setTimeout callback。
执行结束后，它也被移除宏任务队列和调用栈。
这时候微任务队列里面没有任务，因此第二个事件循环也结束了。
宏任务也被清空了，因此这段代码已经执行结束了。
然后突然就结束了！如果还有什么疑惑或者想跟我一起学习的话可以私聊或者评论下方，我一定可以看见！一定回复！用你帅气可爱美丽的双手点个赞是对小王最大的鼓励！
Eventloop事件循环机制相关推荐
- EventLoop 事件循环机制
1. EventLoop 概念 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 因为JavaScrip ...
- 前端面试之事件循环机制
一.事件循环是什么? 首先,JS是单线程的,意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环机制.在JS中把任务分为同步和异步,同步任务和异步任务的执 ...
- 事件循环机制EventLoop
事件循环机制EventLoop Event Loop即事件循环,是解决javaScript单线程运行阻塞的一种机制. 一.EventLoop的相关概念 1.堆(Heap) 堆表示一大块非结构化的内存区 ...
- QT消息/事件循环机制与多线程的关系
关于Qt子线程和消息循环 一.QT消息/事件循环机制 Qt作为一个可视化GUI界面操作系统,是基于事件驱动的,我们程序执行的顺序不再是线性,而是由一个个应用程序内部或外部的事件进行驱动,无事件时便阻塞 ...
- 浏览器事件循环机制与Vue nextTick的实现
浏览器事件循环机制 先上一段简单的代码 console.log('aa'); setTimeout(() => { console.log('bb')}, 0); Promise.resolve ...
- 憨猫的EventLoop事件循环小解
前言 两周没更新文章了,这次带来一篇关于 EventLoop 的知识点扫盲.在日常工作中还是框架库的底层中都涉及到了EventLoop(事件循环).那么这次就一起来看一下神奇的事件循环,它神秘的面纱究 ...
- JavaScript单线程异步的背后——事件循环机制
感觉这篇文章拖了很久,好尴尬的拖延症 正文从这里开始--- 对JavaScript有个很模糊的印象,它是单线程异步的.本文主要来说说JavaScript到底是怎么运行的.但在这之前,让我们先理一下这些 ...
- boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
- js中如何得到循环中的点击的这个id_Js篇面试题9请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
最新文章
- # 20155337 2016-2017-2 《Java程序设计》第六周学习总结
- linux消息信号丢失,Linux信号丢失问题分析
- Python 全栈开发：python字符串切片
- linux centos 回收站,centos rm 回收站
- SIGIR 2021 | 推荐系统中的多行为建模
- StoryBoard学习..(很详细.)
- 技术分享 | 基于EOS的Dapp开发
- redis相关技能积累
- [Android系列—] 2. Android 项目目录结构与用户界面的创建
- python包标准类型和动态导入模块和多态和反射和授权
- 怎么设计接口测试用例更好——百度大佬“教你写用例”
- 路径规划之基于优化的规划算法
- Android分发事件
- C# winform如何设置ListBox背景图或者透明背景及边框色
- 5.mybatis实战教程(mybatis in action)之五:与spring3集成(附源码)
- 冒险岛079服务端_linux版（ubuntu，CentOS）下载
- es使用同义词插件注意事项
- UI设计师行业是做什么的？
- 官方完整HL7 ECG-XML例子及注释翻译（4）
- Shopee关键词广告投放策略解析-马六甲erp