实例分析js事件循环机制


Posted in Javascript onDecember 13, 2017

本文通过实例给大家详细分析了JS中事件循环机制的原理和用法,以下是全部内容:

var start = new Date()
setTimeout(function () {
 var end = new Date
 console.log('Time elapsed:', end - start, 'ms')
}, 500)
while (new Date() - start < 1000) {
}

有其他语言能完成预期的功能吗?Java, 在Java.util.Timer中,对于定时任务的解决方案是通过多线程手段实现的,任务对象存储在任务队列,由专门的调度线程,在新的子线程中完成任务的执行

js是单线程的

JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。

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

函数调用栈和任务队列

实例分析js事件循环机制

调用栈

JS执行时会形成调用栈,调用一个函数时,返回地址、参数、本地变量都会被推入栈中,如果当前正在运行的函数中调用另外一个函数,则该函数相关内容也会被推入栈顶.该函数执行完毕,则会被弹出调用栈.变量也随之弹出,由于复杂类型值存放于堆中,因此弹出的只是指针,他们的值依然在堆中,由GC决定回收.

事件循环(event loop) & 任务队列(task queue)

JavaScript 主线程拥有一个执行栈以及一个任务队列

遇到异步操作(例如:setTimeout, AJAX)时,异步操作会由浏览器(OS)执行,浏览器会在这些任务完成后,将事先定义的回调函数推入主线程的任务队列(task queue)中,当主线程的执行栈清空之后会读取task queue中的回调函数,当task queue被读取完毕之后,主线程接着执行,从而进入一个无限的循环,这就是事件循环.

主线程执行栈 & 任务队列 循环执行,构成事件循环

结论

setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

另一个例子

(function test() {
 setTimeout(function() {console.log(4)}, 0);
 new Promise(function executor(resolve) {
 console.log(1);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(2);
 }).then(function() {
 console.log(5);
 });
 console.log(3);
})()

Macrotask & Microtask

macrotask 和 microtask 是异步任务的两种分类。在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。

macro-task: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, Promises(这里指浏览器实现的原生 Promise), Object.observe, MutationObserver

实例分析js事件循环机制

结论

全部代码(script) macrotask -> microtask queue (含有promise.then) -> macrotask(setTimeout) -> 下一个microtask

Node.js的事件循环

process.nextTick & setImmediate

process.nextTick指定的任务总是发生在所有异步任务之前

setImmediate指定的任务总是在下一次Event Loop时执行

process.nextTick(function A() {
 console.log(1);
 process.nextTick(function B(){console.log(2);});
});
setTimeout(function timeout() {
 console.log('TIMEOUT FIRED');
}, 0)
new Promise(function(resolve) {
 console.log('glob1_promise');
 resolve();
}).then(function() {
 console.log('glob1_then')
})
process.nextTick(function() {
 console.log('glob1_nextTick');
})
Javascript 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
详解vue使用$http服务端收不到参数
Apr 19 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
javascript实现QQ空间相册展示源码
Dec 12 #Javascript
自定义PC微信扫码登录样式写法
Dec 12 #Javascript
基于模板引擎Jade的应用(详解)
Dec 12 #Javascript
jquery获取transform里的值实现方法
Dec 12 #jQuery
JS排序算法之希尔排序与快速排序实现方法
Dec 12 #Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 #Javascript
详解vue渲染函数render的使用
Dec 12 #Javascript
You might like
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php use和include区别总结
2019/10/13 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
js中的this关键字详解
2013/09/25 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
js实现每日签到功能
2018/11/29 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
使用Python进行目录的对比方法
2018/11/01 Python
Python中文编码知识点
2019/02/18 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Django 反向生成url实例详解
2019/07/30 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
趣味运动会开幕词
2015/01/28 职场文书
运动会班级前导词
2015/07/20 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
vue实现Toast组件轻提示
2022/04/10 Vue.js