理解javascript定时器中的单线程


Posted in Javascript onFebruary 23, 2016

一、JavaScript 引擎是单线程的

可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了。

<script type="text/javascript">
 setTimeout( function(){ while(true){} } , 100); 
 setTimeout( function(){ alert('你好!setTimeout'); } , 200); 
 setInterval( function(){ alert('你好!setInterval'); } , 200); 
</script>

浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现3个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。

JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再什么时候都只有一个JS线程在运行JS程序。
GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
浏览器事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

理解javascript定时器中的单线程

由上图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,JavaScript引擎一直等待着任务队列中任务的到来,由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理。

t1、t2....tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务。

t1时刻:

1、GUI渲染线程
2、浏览器事件触发线程:

在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标点击事件正在等待处理。
3、定时触发线程:
这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件是异步事件。
4、在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中,该事件被排到点击事件回调之后,等待处理。同理,还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理。
5、ajax异步请求:
浏览器新开一个http线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到JavaScript引擎的处理队列中等待处理。
二、任务的执行顺序不同,显示结果也不同

1)未使用setTimeout函数

在网上找到的一段代码实例,这里用来演示一下。

<a href="#" id="doBtn">do something</a>
<div id="status"></div>
<script type="text/javascript">
  var doBtn = document.getElementById('doBtn')
   , status = document.getElementById('status');

  function sleep(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn.onclick = function(e) {
   status.innerHTML = 'doing...please wait...'; 
   sleep(3000); // 模拟一个耗时较长的计算过程,3s
   status.innerHTML = 'done'; 
   return false;
  };
</script>

我在firefox中执行了上面的代码。计划是点击“do something”按钮,然后显示“doing...please wait...”,接着执行sleep,最后显示“done”。

但是结果是点击后,浏览器卡住3秒左右,最后直接显示done。

分析下看出,在做status.innerHTML设置的时候,是需要执行GUI渲染线程的,但是现在还在执行JavaScript引擎线程,而JavaScript引擎线程与GUI渲染线程是互斥的,所以就最后显示了done。

 2)使用了setTimeout函数

<a href="#" id="doBtn2">do something timer</a>
<div id="status2"></div>
<script type="text/javascript">
  var doBtn2 = document.getElementById('doBtn2')
   , status2 = document.getElementById('status2');

  function sleep2(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn2.onclick = function(e) {
   status2.innerHTML = 'doing...please wait...'; 
   setTimeout(function() {
   sleep2(3000); 
   status2.innerHTML = 'done'; 
   }, 100); 
   return false;
  };
</script>

在“doing...please wait...”后面加了个setTimeout,延时执行,给了浏览器渲染的时间,这个时候会显示出“doing...please wait...”的字样,然后执行sleep函数,最后显示“done”。

后面有网友发现在firefox中不起作用,的确有这个问题,后面我修改了一下代码,将局部变量的声明,onclick的绑定放到了window.onload事件中,等页面结构加载完成后,我再做脚本操作。

<script type="text/javascript">
  function sleep(ms) {
  //...
  }
  window.onload = function() {
   var doBtn = document.getElementById('doBtn'),
   status = document.getElementById('status');
   
   var doBtn2 = document.getElementById('doBtn2')
    , status2 = document.getElementById('status2');
    
   doBtn.onclick = function(e) {
    //...
   };
   doBtn2.onclick = function(e) {
    //...
   };
  };
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
Vue-Router的使用方法
Sep 05 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 #Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 #Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
javascript每日必学之继承
Feb 23 #Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 #Javascript
理解javascript封装
Feb 23 #Javascript
You might like
php 静态页面中显示动态内容
2009/08/14 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
jQuery操作css样式
2017/05/15 jQuery
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python文件选择对话框的操作方法
2019/06/27 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python如何实现机器人聊天
2020/09/10 Python
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
森林防火工作方案
2014/02/14 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
求职自我评价范文
2015/03/09 职场文书
活动经费申请报告
2015/05/15 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL