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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
js与applet相互调用的方法
Jun 22 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JavaScript 实现页面滚动动画
Apr 24 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中echo和print的区别
2014/08/28 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
对pandas中to_dict的用法详解
2018/06/05 Python
详解python运行三种方式
2019/05/13 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
2015年材料员工作总结
2015/04/30 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
使用 Apache 反向代理的设置技巧
2022/01/18 Servers