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


Posted in Javascript onFebruary 16, 2013

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

Javascript 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 #Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 #Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 #Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 #Javascript
jquery 选择器引擎sizzle浅析
Feb 06 #Javascript
extjs3 combobox取value和text案例详解
Feb 06 #Javascript
js汉字转拼音实现代码
Feb 06 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
JavaScript对象原型链原理解析
2020/01/22 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python字符串中查找子串小技巧
2015/04/10 Python
Python验证企业工商注册码
2015/10/25 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
基于python 取余问题(%)详解
2020/06/03 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
《问银河》教学反思
2014/02/19 职场文书
信息员培训方案
2014/06/12 职场文书
Python 内置函数速查表一览
2021/06/02 Python