Javascript中会经常用到setTimeout来推迟一个函数的执行,如:
setTimeout(function(){alert("Hello World");},1000);
会在执行到这句话后延迟1秒钟来弹出alert窗口。那么再看这一段:
function a(){
setTimeout(function() {alert(1)}, 0);
alert(2);4
}
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函数调用的灵活性,为函数执行顺序的调度提供极大便利。
分享到:
相关推荐
Javascript中会经常用到setTimeout来推迟一个函数的执行并且会在执行到这句话后延迟1秒钟来弹出alert窗口,接下来将介绍一下JavaScript调用堆栈和setTimeout用法,感兴趣的你可不要错过了哈
VBScript & DHTML 脚本技术讨论版 - 无忧脚本 ---体验编写HTML代码的乐趣 - 51JS_COM_files对JavaScript调用堆栈和setTimeout用法的深入研究 - Felix Woo_files关于Javascript的内存泄漏问题的整理稿 - tim-wu - ...
必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码前需等待的毫秒数。 setTimeinterval setInterval(code,millisec[,”lang”]) 参数 描述 code 必需,要调用的函数或要...
JavaScript_window.setTimeout()_的详细用法
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
NULL 博文链接:https://rainbow702.iteye.com/blog/1668935
JavaScript中setTimeout和setInterval函数的传参及调用_.docx
js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解。...定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。 语法
2.setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码
js中SetInterval与setTimeout用法.pdf
详细讲解SetInterval与setTimeout的区别和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInterval()可以执行多...
Javascript定时器 三 setTimeout func 0
在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 js 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结。 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为...
Javascript定时器(二)——setTimeout与setInterval 在 http://www.cnblogs.com/strick/p/3983904.html 有说明
js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作。 (1)setInterval 方法可按照指定的周期(以...