javascript中的event loop事件循环详解


Posted in Javascript onDecember 14, 2018

前言

javascript是单线程的语言,也就是说,同一个时间只能做一件事。而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质

这是今天一个朋友发给我的一个面试题,

感觉还挺有意思的,

写个博客以供分享

先看看这个面试题目:

观察下面的代码,写出输出结果

console.log('0')
setTimeout(function () {
 console.log('1');
});

new Promise(function(resolve,reject){
 console.log('2')
 resolve(3)
}).then(function(val){
 console.log(val)
})
console.log(4)

输出结果: “0” “2” 4 3 “1”

今天主要是分析为什么输出结果是这样的?这就和 javascript 的执行机制密切相关了.

Event Queue 和 Event Loop

javascript 是一门单线程的语言, 这就意味着在执行代码的时候, 都只有一个主线程来处理所有的任务.

我们都知道 javascript 包括同步代码和异步代码, 那么 javascript 是怎么处理这两种情况的呢?

  • 同步和异步任务分别进入不同的执行 场所, 同步的进入主线程,异步的进入 Event Table 并注册函数
  • 当指定的事情完成时, Event Table 会将这个函数(回调函数)移入 Event Queue
  • 主线程内的任务执行完毕为空, 会去 Event Queue 读取对应的函数,进入主线程执行
  • 上述过程会不断重复, 也就是常说的 Event Loop(事件循环)

这里我们引进了 Event Queue 事件队列这一概念. 所有异步操作的回调都会进入到这里. 然后等到主线程空闲, 就会从这里调取回调执行.

setTimeout

setTimeout 相信大家都有使用过, 可以延时执行并且是异步执行的.

但是有时候我们得到的结果往往是代码实际执行的时间比我们想要延时执行的时间要久。这又是为什么呢?

这就和我们之前所说的 Event Loop 有关了, 我们可以来具体看下 setTimeout 的执行步骤:

setTimeout(function () {
asyncFn()
}, 1000);

syncFn()
  • asyncFn 将异步执行函数放在 Event Table, 并且开始计时
  • 开始执行 syncFn, 但是 syncFn 可能需要处理的内容很多, 执行时间超过 1 秒, 但是计时还在继续
  • 计时到达 1 秒, setTimeout 延时完成, asyncFn 进入 Event Queue 事件队列, 但是主线程还在执行, 所以只能等待
  • syncFn 执行完成, 此时 asyncFn 从事件队列中进入主线程执行

所以有时候会出现代码实际执行时间比延时时间长的情况。

宏任务和微任务

之前我们说过异步任务会进入到事件队列中, 不同类型的任务会进入到不同的队列中, 比如宏任务会进入到宏任务队列中, 微任务会进入到微任务队列中.

我们只要记住 当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件。同一次事件循环中,微任务永远在宏任务之前执行

这时候我们就可以解释一开始的代码执行结果了:

  • 主线程执行按顺序代码
  • 遇到 setTimeout, 回调进入到宏任务队列上
  • 遇到 Promise, 立即执行, then 函数进入到微任务队列
  • 同步代码执行结束, 主线程检查是否存在微任务, 发现 then, 执行
  • 微任务执行完毕, 再去查找宏任务 setTimeout, 执行
  • setTimeout 执行结束, 检查是否存在微任务, 不存在, 结束.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 #Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 #Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 #Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 #Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
javascript对HTML字符转义与反转义
Dec 13 #Javascript
Web安全之XSS攻击与防御小结
Dec 13 #Javascript
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
YII框架http缓存操作示例
2019/04/29 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
jQuery实现的分页插件完整示例
2020/05/26 jQuery
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python实现mean-shift聚类算法
2020/06/10 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
小学生自我评价范例
2013/09/24 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
授权委托书格式范文
2014/08/02 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
七年级作文之秋游
2019/10/21 职场文书