setTimeout,setInterval你不知道的事

 

javascript线程解释(setTimeout,setInterval你不知道的事) 

标签: javascript引擎任务浏览器functionxmlhttprequest

2011-11-21
14:22 5672人阅读

 分类:

javascript

今天看到这篇文章,学到了不少东西 特此发出来 和大家分享

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行,
我想不少人都深有同感, 例如

setTimeout( function(){ ;
setInterval( callbackFunction , 100);

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

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

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

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

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

setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ ;
setInterval( callbackFunction , 200);

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

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

拔开云雾见月明

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

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

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

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

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

浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线
程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产
生不同的异步事件,下面通过一个图来阐明单线程的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所设置的函数.

个人补充:

setTimeout或者setInterval的设置的时间参数的具体意思是:在参数指定的时间后将待执行方法放到执行队列中
如果队列中没有其他方法等待,则回立即执行setTimeout指定的方法,因此有时给人好像是立即执行的假象。

时间: 2024-09-21 04:06:49

setTimeout,setInterval你不知道的事的相关文章

setTimeout,setInterval你不知道的…

  javascript线程解释(setTimeout,setInterval你不知道的事)  标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 14:22 5672人阅读  分类: javascript 今天看到这篇文章,学到了不少东西 特此发出来 和大家分享 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如

315大揭秘:存储与电商那些你不知道的事

第1页315又临存储于电商不得不说的故事 一年一度的315国际消费者权益日又到了,每年到了315总是各大商家最为头痛的时候,各种不良的问题都会被揭露,尤其是在网上购物日益火热的今天,各种电商的http://www.aliyun.com/zixun/aggregation/20581.html">产品质量.售后退换货等各种问题频发,今天我们就来为大家揭开存储与电商那些你不知道的事. 就在2012年的年尾,一桩奇异的3TB硬盘变80GB在各大论坛级微薄上引起了广泛的关注,事主在国内最大的电商京

setTimeout/setInterval 传参的问题

我们知道,setTimeout/setInterval 是 JavaScript 语言下的两门利器.有时候控件没反应了,代码外层包装一下 setTimeout 就可以了.JavaScript 是单线程的环境,setTimeout 的作用是把包装的代码塞入队列,而不是立刻执行.这一招对付莫名其妙的渲染问题非常有效.使用上, setTimeout/setInterval 要求第一个参数类型为 String 或 Function.遇到 Function,自然涉及传参的问题.就像 event handl

定时器(setTimeout/setInterval)调用带参函数失效解决方法_javascript技巧

首先来看下定时器的用法 1. setInterval(code,millisec[,"lang"]) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. 参数 描述 code 必需,要调用的函数或要执行的代码串. millisec 必需,周期性执行或调用 code 之间的时间间隔,以毫秒计. 2.setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 参数 描述 code 必需,要调

仅IE不支持setTimeout/setInterval函数的第三个以上参数_javascript技巧

复制代码 代码如下: setTimeout(function(obj){ alert(obj.a); }, 2000, {a:1}); 即传了第三个参数,第三个参数将作为回调函数的参数obj传入.在非IE浏览器中都弹出了1.这样有个好处,即解决了回调函数的执行上下文,比如要调用某个对象的某个方法,即可以通过参数把该对象传进去. 复制代码 代码如下: setTimeout(function(obj){ obj.method(); }, 2000, obj); 当然,你还可以传多个参数给回调函数,如

Javascript中setTimeout,setInterval定时执行操作

今天在项目中遇到一个关于定时执行操作的问题.Javascript为定时操作提供了两个方法:  代码如下 复制代码 1.timeId = setTimeout("function();",delaytime);  //timeId就是这个定时器的ID(后面会用到), delaytime的单位是千分之一秒, millisecond.  代码如下 复制代码 2.timeId = setInterval("function();",delaytime); //同上 这两个定

window对象方法之setTimeout(),setInterval()

window中的这两个方法是比较重要的,在许多的设计中会使用到这两个方法.比如使用在倒计时抢购中. 首先来说说这两个方法的用法吧! 一:window.setTimeout(); setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. //延迟几秒以后执行代码,并且只执行 一次 语法: setTimeout(code,millisec); 例子:两秒后,弹出"hello js": 1 第一个参数 我们要执行的代码 或则 一个函数 2 第二个参数 毫秒数第一种写法 (直接

btrace一些你不知道的事(源码入手)

背景     周五下班回家,在公司班车上觉得无聊,看了下btrace的源码(自己反编译). 一些关于btrace的基本内容,可以看下我早起的一篇记录:btrace记忆      上一篇主要介绍的是btrace的一些基本使用以及api,这里我想从btrace源码本身进行下介绍.至于btrace的优势,能用来干些什么,自己上他的官网看下或者google一下,花个半小时就能明白了.      至于为什么会去反编译查看btrace源码,主要是会在部门整个关于btrace的分享.同时btrace的相关技术

听制作人讲你不知道的事PlayStation大奖逸闻

为表彰优秀PS3和PSP游戏而设立的官方奖PlayStation Awards 2010,12月3日在日本东京举办了盛大的颁奖活动.颁奖仪式结束后,众获奖作品代表和嘉宾出席了索尼官方准备的酒会.在酒会上,有一个名为"制作人先生教教我"的环节颇为有趣,由主持人用事先通过网络征集而来的玩家问题向各位制作人提问.下面就一起来看看,这些热门游戏的制作人们,都有哪些不为人知的经历和感想. 辻本良三 CAPCOM <怪物猎人P2G>.<怪物猎人P3>等 --(MHP3)发售