JavaScript调用堆栈及setTimeout使用方法深入剖析

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函数调用的灵活性，为函数执行顺序的调度提供极大便利。

赞 (0)

相关推荐

  • JavaScript高级程序设计 错误处理与调试学习笔记

    第十四章 错误处理与调试 1.开启浏览器错误报告 1.1 Internet Explorer □Toos → Internet Option → Anvanced → Display a notification about every script error 1.2 Firefox □Tools → Error Console (Firebug) 1.3 Safari □Edit → Preferences → Advanced → Show develop menu in menubar/

  • JS实现队列与堆栈的方法

    JS实现队列与堆栈的方法

    本文实例讲述了JS实现队列与堆栈的方法.分享给大家供大家参考,具体如下: 在面向对象的程序设计里,一般都提供了实现队列(queue)和堆栈(stack)的方法,而对于JS来说,我们可以实现数组的相关操作,来实现队列和堆栈的功能,看下面的相关介绍. 一.看一下它们的性质,这种性质决定了它们的使用场合 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出! 二.看一下实现的代码(JS代码) var a=new

  • Javascript 错误处理的几种方法

    1.使用window.onerror指定错误处理函数. 当有错误的时候,onerror会被callback. 当某个JavaScript block中有多个script错误时,第一个错误触发后(回调callback),当前Javascript block后面的script会被自动Drop忽略掉,不被执行. 如:  复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

  • JavaScript错误处理

    一．错误分类 1． 语法错误 也称为解析错误,发生在传统编程语言的编译时,在JavaScript中发生在解释时,这些错误是由代码中的意外字符直接引起的,然后就不能直接编译/解释,eg,在一行代码因缺少右括号,产生了语法错误.发生语法错误时,就不能继续执行代码.在JavaScript中,只有在同一个线程中的代码会受语法错误的影响.在其他线程中的代码和其他外部引用的文件中的代码,如果不依赖于包含错误的代码,则可以继续执行. 2． 运行时错误 也称为异常(exception,在编译期/解释器后).此时

  • JavaScript错误处理和堆栈追踪详解

    有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于 Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位). 合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 Errors 对象及其相关属性之后, 能有助于你更充分地利用 Errors. (函数的)调用栈是怎么工作的 在谈论错误之前, 先要了解下(

  • JavaScript 错误处理与调试经验总结

    JavaScript 错误处理与调试经验总结

    下面总结一下JS错误处理与调试的方法 方法1:用alert() 和document.write()方法监视变量值. alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击"确定"按钮,而document.write()则在输出值后继续运行代码.调试JS时可以根据具体情况来选择这种方法. 例如下面代码:将数组a中以1开头的数据添加到数组b中 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • 输出java进程的jstack信息示例分享 通过线程堆栈信息分析java线程

    复制代码 代码如下: #!/bin/shpro_name=java #process namekeys=`ps -ef |grep "$pro_name" |grep -v "grep" | awk '{print $2}'`nowdate=`date +%Y%m%d%H%M%S` jstackpath="/usr/java/jdk1.6.0_07/bin/jstack"cpulogpath="/home/" for key

  • JavaScript高级程序设计 阅读笔记（二十） js错误处理

    一.错误分类 1.语法错误:也称解析错误,发生在传统语言的编译时,在JavaScript中发生在解释时.这些错误是由代码中的意外字符直接引起的,然后就不能直接编译/解释.发生语法错误时,就不能继续执行代码.在JavaScript中,只有在同一个线程中的代码会受语法错误的影响.在其他线程中的代码和其他外部引用的文件中的代码,如果不依赖于包含错误的代码,则可以继续执行. 2.运行时错误:也称为异常(exception,在编译期/解释器后).此时,问题并不出在代码的语法上,而是,尝试完成的一个操作,在

  • java自带的工具Jstack截取进程中的堆栈信息

    java自带的工具Jstack截取进程中的堆栈信息

    在Java软件的使用过程中,有时会莫名的出现奇怪的问题.而这些问题常常无法使用日志信息定位,这时我们就需要通过查看进程内部线程的堆栈调用关系来分析问题出在哪里. 举个例子,当我们在做某个操作时,莫名的会弹出多个警告框,其中有些信息是正常的,有些则不是.对于这些错误的警告信息,我们该如何定位是哪个位置的代码出现了错误弹出的框呢? 我们就需要在弹框以后,去查看软件的各个线程,去查找究竟是哪个线程导致了该问题.可是有时因为环境.时间等问题,我们根本不能拿着IDE去调试, 只能通过工具软件拍下内存快照,

  • javascript Error 对象 错误处理

    Error对象 Property:   name: 错误名   number: 错误号   description: 描述   message: 错误信息,多同description  FF Only 属性   fileName: 错误发生的文件   stack: 错误发生时的调用堆栈 Constructor:   Error(){     this(0,"")} Error(description){     this(0,description)} Error(number,des

随机推荐