setTimeout,setInterval运行原理
Posted 小小程序猿(^_^)
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了setTimeout,setInterval运行原理相关的知识,希望对你有一定的参考价值。
function a() { setTimeout(function(){alert(1)},0); alert(2); } a();
和其他的编程语言一样,javascript中的函数调用也是通过堆栈实现的。在执行函数a的时候,a先入栈,如果不给alert(1)加setTimeout,那么alert(1)第2个入栈,最后是alert(2)。但现在给alert(1)加上setTimeout后,alert(1)就被加入到了一个新的堆栈中等待,并”尽可能快“的执行。这个尽可能快就是指在a的堆栈完成后就立刻执行,因此实际的执行结果就是先alert(2),再alert(1)。在这里setTimeout实际上是让alert(1)脱离了当前函数调用堆栈。
利用这一点,javascript实际上是有多个线程的。
问题是: 多个setTimeout 是 分别放在不同的堆栈吗?如果是,那么我们就真的有了多线程的基础了
另一篇文章中的阐述。哪个是对的呢?
javascript线程解释(setTimeout,setInterval你不知道的事)
setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100);
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!
div.onclick = function(){ setTimeout( function(){document.getElementById(’inputField’).focus();}, 0); };
setTimeout( function(){ while(true){} } , 100); setTimeout( function(){ alert(’你好!’); } , 200); setInterval( callbackFunction , 200);
<strong>JavaScript引擎是单线程运行的,浏览器无论在什么时候都有且只有一个线程在运行JavaScript程序.
</strong>
JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化
那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?下面结合浏览器内核处理方式简单说明
浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步。假如某一浏览器内核的实现至少有三个常驻线程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的,虽然每个浏览器内核实现细节不同,但这其中的调用原理都是大同小异
所以,在脚本中执行对界面进行更新操作,如添加结点,删除结点或改变结点的外观等更新并不会立即体现出来,这些操作将保存在一个队列中,待JavaScript引擎空闲时才有机会渲染出来。
同理,还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理。
如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.
相信您现在已经很清楚JavaScript是否可多线程,也理解JavaScript定时器运行机制了,下面我们来对一些案例进行分析
案例1:setTimeout与setInterval
setTimeout(function(){ /* 代码块... */ setTimeout(arguments.callee, 10); }, 10); setInterval(function(){ /*代码块... */ }, 10);
这两段代码看一起效果一样,其实非也
第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout 定时(此时会把代码插入任务队列),假定上一个回调处理完到下一个回调开始处理为一个时间间隔,理论两个setTimeout回调执行时间间隔>=10ms。setTimeout好处就是严格保证每隔一段时间执行代码。
第二段自setInterval设置定时后,定时触发线程就会源源不断的每隔十秒产生异步定时事件并放到任务队列尾,理论上两个setInterval 回调执行时间间隔<=10,这就可能导致上一段代码执行完毕后立即执行下一段代码,不会出现想象中的间隔一段时间再执行
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.
setTimeout(function(a,b,c){ console.log(a);//a console.log(b);//b console.log(c);//c },0,3,4,5); setInterval(function(a,b,c){ console.log(a);//b console.log(b);//b console.log(c);//c },0,3,4,5);
以上是关于setTimeout,setInterval运行原理的主要内容,如果未能解决你的问题,请参考以下文章
javascript之调度:setTimeout 和 setInterval
深入理解定时器系列第一篇——理解setTimeout和setInterval
详解JS中定时器setInterval和setTImeout的this指向问题
JavaScript定时器 setTimeout与setInterval 浅析