博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端之JavaScript(1) - 浅谈JavaScript函数与栈
阅读量:6932 次
发布时间:2019-06-27

本文共 1363 字,大约阅读时间需要 4 分钟。

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

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

会在执行到这句话后延迟1秒钟来弹出alert窗口。

那么再看这一段:

1 function test(){
2     setTimeout(function() {alert(1)}, 0);
3     alert(2);
4 }
5 test();  

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

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

看下面一个例子:

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

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

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

 

转载于:https://www.cnblogs.com/royi123/archive/2013/04/14/3021178.html

你可能感兴趣的文章
微服务开源项目ServiceComb 毕业成为Apache顶级项目
查看>>
ThoughtWorks雷达上的新奇变化
查看>>
《可扩展的艺术》内容回顾与作者采访
查看>>
Java 9推迟6个月发布?
查看>>
Spark 2.4重磅发布:优化深度学习框架集成,提供更灵活的流式接收器
查看>>
年终总结,程序员票选最喜欢的编程语言花落谁家?
查看>>
Reinhold就Jigsaw投票一事向JCP提交公开信
查看>>
Spark、Flink、CarbonData技术实践最佳案例解析
查看>>
你在过度测试你的软件吗?
查看>>
慎用!BLEU评价NLP文本输出质量存在严重问题
查看>>
AppDynamics把业务交易跟踪扩展到SAP环境
查看>>
历时三年,美图全面容器化踩过的坑
查看>>
2018年终盘点:我们处在一个什么样的技术浪潮当中?
查看>>
IBM发布全球首台商用量子计算机
查看>>
在一个成熟的分布式系统中 如何下手做高可用?
查看>>
CoreOS 和 Kubernetes 1.5 自主运行 Kubernetes、Container Linux
查看>>
The only supported ciphers are AES-128-CBC and AES-256-CBC
查看>>
sphinx 全文搜索引擎
查看>>
Kotlin成为正式的Android编程语言
查看>>
物联网技术周报第 141 期: 使用 Alexa Voice 和 Raspberry Pi 构建图片识别应用
查看>>