LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

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

admin
2010年3月24日 21:59 本文热度 8325
[p]javascript中会经常用到settimeout来推迟一个函数的执行,如:[/p][color=#000000]settimeout([/color][color=#0000ff]function[/color][color=#000000](){alert([/color][color=#000000]"[/color][color=#000000]hello world[/color][color=#000000]"[/color][color=#000000]);},[/color][color=#000000]1000[/color][color=#000000]);[/color] [br]会在执行到这句话后延迟1秒钟来弹出alert窗口。那么再看这一段: [color=#008080]1[/color] [color=#0000ff]function[/color][color=#000000] a(){[br][/color][color=#008080]2 [/color][color=#000000]settimeout([/color][color=#0000ff]function[/color][color=#000000]() {alert([/color][color=#000000]1[/color][color=#000000])}, [/color][color=#000000]0[/color][color=#000000]);[br][/color][color=#008080]3 [/color][color=#000000]alert([/color][color=#000000]2[/color][color=#000000]);[br][/color][color=#008080]4[/color] [color=#000000]}[br][/color][color=#008080]5[/color] [color=#000000]a();[/color][color=#008080] [/color][color=#008080][/color][color=#000000][/color]
[p]注意这段代码中的settimeout延迟设为了0,就是延迟0毫秒,貌似是不做任何延迟立刻执行,即1,2。但实际的执行结果确是2,1。为什么?这得从javascript调用堆栈(call stack)和settimeout的功能说起。[/p]
[p]首先,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)脱离了当前函数调用堆栈。看下面一个例子:[/p]
[p][/p][color=#000000]<[/color][color=#000000]input name[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]input[/color][color=#000000]"[/color][color=#000000] onkeydown[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]alert(this.value)[/color][color=#000000]"[/color][color=#000000] type[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]text[/color][color=#000000]"[/color][color=#000000] value[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]a[/color][color=#000000]"[/color][color=#000000] [/color][color=#000000]/[/color][color=#000000]>[/color]
[p]这样一段函数意图是每输入一个字符就把当前input里的所有字符都alert出来,但实际效果确是alert出按键之前的内容。这里,我们就可以利用settimeout(0)来实现。[/p]
[p][/p]
[p][/p][color=#000000]<[/color][color=#000000]input onkeydown[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]var me=this; settimeout(function(){alert(me.value)}, 0)[/color][color=#000000]"[/color][color=#000000] name[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]input[/color][color=#000000]"[/color][color=#000000] type[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]text[/color][color=#000000]"[/color][color=#000000] value[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]a[/color][color=#000000]"[/color][color=#000000] [/color][color=#000000]/[/color][color=#000000]>[/color]
[p][/p]
[p][/p]
[p]这样当onkeydown事件触发的时候,alert就被放入了下一个调用堆栈,一旦onkeydown事件触发的堆栈关闭后就开始执行。当然浏览器还有个onkeyup事件也可以实现我们的需求。[/p]
[p]这样的settimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变dom,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为dom没有发生任何改变而忽略这两句话,因此我们可以通过settimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了(虽然速度很快可能无法被察觉)。[/p]
[p]总之,settimeout增加了javascript函数调用的灵活性,为函数执行顺序的调度提供极大便利。[/p]

该文章在 2010/3/24 21:59:36 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved