JavaScript多线程详解


Posted in Javascript onAugust 12, 2015

虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题。

造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌面程序来完成的,那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢?

大家都知道javascript是单线程执行的,但是又可以通过setTimeout或者setInterval定时执行一个方法,通过Ajax可以在向服务器端发送请求没有收到回应可以继续执行主逻辑。这些是如何做到的呢,下面就来探讨下。

先看如下一段代码:

<html>
  <body>
  <script type="text/javascript">
    function printHello()
    {
      console.time("hello");
    }
    function printHello1()
    {
      console.timeEnd("hello");
    }
    setTimeout(printHello,1000);
    setTimeout(printHello1,5000);
    function wait(time)
    {
      var now = Date.now();
      while(Date.now() - now < time)
      {
      }
    }
    wait(5000);
  </script>
  </body>
</html>

以上代码得执行结果为

hello: 0.124ms

从代码可以看出,printHello 与printHello1几乎是同时执行的。如果对于多线程模型,应该执行间隔是4000ms。

以上的原因是setTimeout只是将事件到时间点压入队列,而不是立即执行。具体何时执行还要看浏览器的空闲程度。

其实虽然javascript是单线程的,但是浏览器是多线程的,典型的浏览器有如下线程:

javascript引擎线程
界面渲染线程
浏览器事件触发线程
Http请求线程

javascript单线程指的是javascript引擎线程单线程处理它的事件队列,而浏览器是事件驱动的,很多事件都是异步的,比如鼠标点击事件,setTimeout,Ajax回调事件,当这些事件发生时,浏览器会将这些事件放入执行队列,待浏览器空闲时再执行。

另外,值得一提的是,ajax调用确实是异步的,浏览器会启动一个新线程来想服务端发送请求,如果设置了回调事件,会根据服务端返回状态将回调事件放入事件队列。

以上所述是本人对JavaScript多线程的理解,个人理解能力有限,还望各位大侠提成宝贵意见,共同学习。希望以上介绍对大家有所帮助。

Javascript 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
Javascript节点关系实例分析
May 15 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 #Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 #Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 #Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
聊天室php&amp;mysql(三)
2006/10/09 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
python图像处理之反色实现方法
2015/05/30 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
婚礼主持词开场白
2014/03/13 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书