欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

深入理解JavaScript定时函数setTimeout

发布时间:2025/4/9 68 豆豆
生活随笔 收集整理的这篇文章主要介绍了 深入理解JavaScript定时函数setTimeout 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

以一段javascipt代码为例分析说明

1 function test() { 2 var a = 0; 3 a = 1; 4 setTimeout(function() { 5 alert(a); 6 a = 1; 7 }, 1000); 8 9 a = 2; 10 11 setTimeout(function() { 12 alert(a); 13 a = 3; 14 }, 3000); 15 } 16 17 test(); 18 19 alert(0);

当脚本开始执行的时候,首先调用test(),代码会继续往下执行,所以alert(0)会先执行,窗口弹出0

再分析test()代码
声明变量a,并赋初值0,接着将a的值改为1
此时执行定时函数setTimeout
这里要说明一下,浏览器中有各种各样的事件,如点击事件、定时器事件等,各种事件都是以队列的方式
进入javaScript引擎的,最后按照顺序依次执行。这也从另一方面说明了JavaScript的执行方式是单线程的。
所以1000毫秒之后由定时器setTimeout产生的异步事件会进入到JavaScript引擎的队列中,但是需要注意的是
在这1000毫秒的时间内,javaScript引擎也一直在解析代码,所以接下来a被赋值为2,所以第二个弹窗中弹出
a的值为2,
由于队列是顺序执行的,所以第一个setTimeout事件后,a被赋值为1,所以第二个setTimeout中alert弹窗中
a的值为1,虽然a最后被赋值为3,但是第二个setTimeout是javascript中最后的一个事件,运行到这里脚本结束。

 

参考文章:

http://www.laruence.com/2009/09/23/1089.html

http://www.cnblogs.com/jeffwongishandsome/archive/2011/06/13/2080145.html

转载于:https://www.cnblogs.com/iaknehc/p/7368182.html

总结

以上是生活随笔为你收集整理的深入理解JavaScript定时函数setTimeout的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。