对JavaScript调用堆栈和setTimeout用法的深入研究

http://www.felixwoo.com/archives/244

Javascript中会经常用到setTimeout来推迟一个函数的执行，如：

setTimeout(function(){alert("Hello World");},1000)

会在执行到这句话后延迟1秒钟来弹出alert窗口。那么再看这一段：

function a() {
setTimeout(function() {alert(1)}, 0);
alert(2);
}
a();

注意这段代码中的setTimeout延迟设为了0，就是延迟0毫秒，貌似是不做任何延迟立刻执行，即1,2。但实际的执行结果确是2,1。为什么？这得从Javascript调用堆栈(call stack)和setTimeout的功能说起。

首先，JavaScript是单线程的，即同一时间只执行一条代码，所以每一个JavaScript代码执行块会“阻塞”其它异步事件的执行。其次，和其他的编程语言一样，Javascript中的函数调用也是通过堆栈实现的。在执行函数a的时候，a先入栈，如果不给alert(1)加setTimeout，那么alert(1)第2个入栈，最后是alert(2)。但现在给alert(1)加上setTimeout后，alert(1)就被加入到了一个新的堆栈中等待，并“尽可能快”的执行。这个尽可能快就是指在a的堆栈完成后就立刻执行，因此实际的执行结果就是先alert(2)，再alert(1)。在这里setTimeout实际上是让alert(1)脱离了当前函数调用堆栈。看下面一个例子：

<input name="input" onkeydown="alert(this.value)" type="text" value="a" />

这样一段函数意图是每输入一个字符就把当前input里的所有字符都alert出来，但实际效果确是alert出按键之前的内容。这里，我们就可以利用setTimeout(0)来实现。

<input onkeydown="var me=this; setTimeout(function(){alert(me.value)}, 0)" name="input" type="text" value="a" />

这样当onkeydown事件触发的时候，alert就被放入了下一个调用堆栈，一旦onkeydown事件触发的堆栈关闭后就开始执行。当然浏览器还有个onkeyup事件也可以实现我们的需求。

这样的setTimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM，如果再这个函数堆栈中把页面背景先从白色设为红色，再设回白色，那么浏览器会认为DOM没有发生任何改变而忽略这两句话，因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈，那么就可以确保背景颜色发生过改变了（虽然速度很快可能无法被察觉）。

总之，setTimeout增加了Javascript函数调用的灵活性，为函数执行顺序的调度提供极大便利。

推荐阅读jQuery作者John的一篇文章：How JavaScript Timers Work，你会对JavaScript单线程本质和setTimeout以及setInterval有更加深刻的理解。

JavaScriptsetTimeout

堆栈


打印9条评论了

上一篇
人品爆发
下一篇
最新GI作品glickr公开测试

你可能感兴趣的文章

一篇如诗如画的JavaScript文章 (2)
深入理解JavaScript闭包(closure) (27)
JavaScript中的作用域 (0)
使用 JavaScript 进行元编程 (2)
JavaScript Library (0)

9 条评论






fangzi
说：
2007-11-15于8:21
有想法！~~

回复

zw0806
说：
2007-11-15于8:21
以前就听说Java、JS的程序员思维受限制，并且对程序的理解有些偏差，今天见识到了

（并没有bs的意思）

==============

Why???

回复

路过者
说：
2007-11-15于8:21
以前就听说Java、JS的程序员思维受限制，并且对程序的理解有些偏差，今天见识到了

（并没有bs的意思）

回复

Felix
说：
2007-11-15于8:21
楼上的竟然把Java和JS相提并论，pf。

欢迎指教。

回复

shqlsl
说：
2007-11-15于8:21
function a(){

var b=’111′;

// setTimeout(“alert(b)”,1000);//得不到变量b

window.setTimeout(function(){alert(b)},101);//让b当前参数变量

window.setTimeout((function c(){b=222}),100);//让b当前参数变量

}

a()

———————————–

平时这样做的大家肯定是很多。解决setTimeout传递局部变量的时候。

用堆怎么解释呢？ b变量已经入堆？

setTimeout c局部函数怎么改变了局部变量b的值？

能不能这样理解？ 一个函数里的setTimeout的堆 是在执行环境在 这个函数里。

回复

Felix
说：
2007-11-15于8:21
看了digitalghost的文章，我认为把setTimeout放在for中循环100次，其实是100个setTimeout中的函数同时执行，所以中间不可能插入set interval 1和set interval 2。在test生成的堆栈中，只有test function end入栈了，我猜想可能为setTimeout申请了100个堆栈，当然这100堆栈不会同时执行（像多线程一样），当第1个执行完后，时间已经过去了10ms，所以后面99个也满足了时间条件，所以会依次立刻执行。而不是每个setTimeout中的函数都等待10ms。setInterval我猜测就是一个递归调用的setTimeout，其实和setTimeout是一回事，在每个堆栈结束的时候都会检查符合时间条件的下一个堆栈是否存在，如果存在就执行，不存在则继续等待并检查。所以，整个流程其实是单线程的，堆栈其实只是一个内存中存放执行函数的一个数组或链表，因此多个堆栈和多线程应该是两回事。Javascript虽然是单线程的，但是可以维持多个函数调用堆栈。

回复

digitalghost
说：
2007-11-15于8:21
I have some thinking about this blog post.

review it plz.

http://www.riaexpert.cn/2007/11/15/javascript-%e5%a4%9a%e7%ba%bf%e7%a8%8b%e7%9a%84%e7%a0%94%e7%a9%b6%e4%ba%8e%e6%80%9d%e8%80%83/

and I don’t think that javascript interpreter has more than one ’stack’ to process the function call,I think there is just a single queue for function execution

回复

shqlsl
说：
2007-11-15于8:21
　楼上后面那段话，能不能给出一个妙用？

比如：一行单元格，onmouseover红色，移开恢复白色。

－－－－－－

我还没想到实现，各位给段用setTimeout的堆实现的？

回复

Felix
说：
2007-11-15于8:21
onmouseover和onmouseout会生成两个不同的堆栈，所以实际上单元格的颜色是会改变的。用setTimeout只是为了帮助函数调用逃离当前堆栈。比如有的函数调用堆栈中要得到DOM的最新结果，但这时DOM还未发生改变，这样就可以把这个函数转移到下一个堆栈中，等待“尽快执行”。