理解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 相关文章推荐
node.js操作mysql(增删改查)
Jul 24 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
如何手写一个简易的 Vuex
Oct 10 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php 强制下载文件实现代码
2013/10/28 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python实现GIF图倒放
2020/07/16 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
文明学生标兵事迹
2014/01/21 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
迎七一演讲稿
2014/09/12 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
师范生见习报告范文
2014/11/03 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
人与自然观后感
2015/06/16 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
四年级数学教学反思
2016/02/16 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python绘制箱型图
2021/04/27 Python