深入理解JavaScript定时机制


Posted in Javascript onOctober 29, 2010

例如

setTimeout(function() { 
alert('你好!'); 
}, 0); 
setInterval(callbackFunction, 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:

div.onclick = function(){ 
setTimeout(function() { 
document.getElementById('inputField').focus(); 
}, 0); 
};

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:

setTimeout(function() { 
while (true) { 
} 
}, 100); 
setTimeout(function() { 
alert('你好!'); 
}, 200); 
setInterval(callbackFunction, 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会因为痛苦而停止,下面让我们来展开JavaScript线程和定时器探索之旅!

拔开云雾见月明

出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.

而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化.

那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?
下面结合浏览器内核处理方式简单说明.

浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的.虽然每个浏览器内核实现细节不同,但这其中的调用原理都是大同小异.

深入理解JavaScript定时机制
由图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理.

上图t1-t2..tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务,假设现在是t1时刻,引擎运行在t1对应的任务方块代码内,在这个时间点内,我们来描述一下浏览器内核其它线程的状态.
t1时刻:

GUI渲染线程:

该线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行.本文虽然重点解释JavaScript定时机制,但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的,这容易理解,因为JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.

在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.
所以,在脚本中执行对界面进行更新操作,如添加结点,删除结点或改变结点的外观等更新并不会立即体现出来,这些操作将保存在一个队列中,待JavaScript引擎空闲时才有机会渲染出来.
GUI事件触发线程:
JavaScript脚本的执行不影响html元素事件的触发,在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标点击事件正在等待处理.
定时触发线程:
注意这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件也是异步事件.
由图可知,在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中, 该事件被排到点击事件回调之后,等待处理.
同理, 还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理.
可见,假如时间段t1非常长,远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件并放到任务队列尾而不管它们是否已被处理,但一旦t1和最先的定时事件前面的任务已处理完,这些排列中的定时事件就依次不间断的被执行,这是因为,对于JavaScript引擎来说,在处理队列中的各任务处理方式都是一样的,只是处理的次序不同而已.

t1过后,也就是说当前处理的任务已返回,JavaScript引擎会检查任务队列,发现当前队列非空,就取出t2下面对应的任务执行,其它时间依此类推,由此看来:

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

相信您现在已经很清楚JavaScript是否可多线程,也了解理解JavaScript定时器运行机制了,下面我们来对一些案例进行分析:

案例1:setTimeout与setInterval

setTimeout(function() { 
/* 代码块... */ 
setTimeout(arguments.callee, 10); 
}, 10); 
setInterval(function(){ 
/*代码块... */ 
}, 10);

这两段代码看一起效果一样,其实非也,第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout定时, 假定上一个回调处理完到下一个回调开始处理为一个时间间隔,理论两个setTimeout回调执行时间间隔>=10ms .第二段自setInterval设置定时后,定时触发线程就会源源不断的每隔十秒产生异步定时事件并放到任务队列尾,理论上两个setInterval回调执行时间间隔<=10.

案例2:ajax异步请求是否真的异步?

很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行onreadystatechange所设置的函数.

Javascript 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
vue语法之拼接字符串的示例代码
Oct 25 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
javascript天然的迭代器
Oct 29 #Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 #Javascript
js类型检查实现代码
Oct 29 #Javascript
JavaScript继承方式实例
Oct 29 #Javascript
You might like
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
js null undefined 空区别说明
2010/06/13 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
javascript类型转换示例
2014/04/29 Javascript
JSON相关知识汇总
2015/07/03 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python对象体系深入分析
2014/10/28 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
财会自我鉴定范文
2013/12/27 职场文书
会议接待欢迎词
2014/01/12 职场文书
预备党员政审材料
2014/02/04 职场文书
员工考核评语大全
2014/04/26 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
邀请书模板
2015/02/02 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL