Javascript实现异步编程的过程


Posted in Javascript onJune 18, 2018

相信不少人对Javascript单线程表示怀疑:为何单线程可以实现异步操作呢?其实Javascript确实是单线程的(我们不妨把这个线程称作主线程),但它实现异步操作的方式确实借助了浏览器的其他线程的帮助。那其他线程是怎么帮助Javascript主线程来实现异步的呢?答案就是任务队列(task queue)和事件循环(event loop)。

任务队列

首先,作为单线程语言,在Javascript中定义的任务都会在主线程中执行。但是并不是每个任务都会立刻执行,而这种不立刻执行的任务我们称作异步任务。相反,那些立刻执行的任务我们把它们称作同步任务。而这些异步任务都会交给浏览器的其他线程去执行,但是主线程需要了解这些异步任务执行的状态,才方便进行下一步操作。

打个比方,主线程准备做饭,所以下达一个异步任务去买菜,异步任务买完菜之后得告诉主线程:“我买完菜啦”,这个时候主线程才好开始做饭。

而我们知道因为Javascript是单线程,所以上述的“下一步操作”没法直接定义在主函数里(不然就被当做同步任务直接执行了),那这些应该定义在哪里呢?答案就是异步任务的回调函数中。在Javascript异步机制中,任务队列就是用来维护异步任务回调函数的队列。这样一个队列用来存放这些回调函数,它们会等到主线程执行完所有的同步函数之后按照先进先出的方式挨个执行。那么执行完任务队列之后呢?Javascript主线程就执行完毕了吗?当然不是,不然网页加载完毕之后,谁来处理后续与用户的交互事件(比如点击事件)呢?

事件循环

Javascript实现异步编程的过程

我们通过上图来更加形象的了解Javascript的异步机制。

执行同步任务 -> 检查任务队列中是否有任务 -> [有如果则执行] -> 检查任务队列中是否有任务 -> [有如果则执行] -> ......
可见主线程在执行完同步任务之后,会无限循环地去检查任务队列中是否有新的“任务”,如果有则执行。而这些任务包括我们在异步任务中定义的回调函数,也包括用户交互事件的回调函数。通过事件循环,Javascript不仅很好的处理了异步任务,也很好的完成了与用户交互事件的处理。因为在完成异步任务的回调函数之后,任务队列中的任务都是由事件所产生的,因此我们也把上述的循环过程叫做事件循环。

异步机制实践

console.log('定时器去买菜吧')
setTimeout(function(){
 console.log('菜买完了,主线程去做菜吧')
}, 0)
console.log('你先去买菜,我先看个世界杯')

在浏览器中执行上述代码,兴许能更好地理解Javascript的异步机制。

总结

总而言之,Javascript单线程的背后有浏览器的其他线程为其完成异步服务,这些异步任务为了和主线程通信,通过将回调函数推入到任务队列等待执行。主线程所做的就是执行完同步任务后,通过事件循环,不断地检查并执行任务队列中回调函数。

Javascript 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
详解JS函数stack size计算方法
Jun 18 #Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
node.js自动上传ftp的脚本分享
Jun 16 #Javascript
Vue中props的使用详解
Jun 15 #Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
深入浅析Vue全局组件与局部组件的区别
Jun 15 #Javascript
react-native android状态栏的实现
Jun 15 #Javascript
You might like
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
js实现全选和全不选
2020/07/28 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
tensorflow实现KNN识别MNIST
2018/03/12 Python
儿童python练习实例
2018/05/27 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
英语自荐信常用语句
2013/12/13 职场文书
小学评语大全
2014/04/22 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
预防传染病方案
2014/06/14 职场文书
机械工程师岗位职责
2014/06/16 职场文书
庆元旦活动总结
2014/07/09 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
大学教师个人总结
2015/02/10 职场文书
2016党员党课心得体会
2016/01/07 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server