setTimeout的延时为0时多个浏览器的区别
更新时间：2012年05月23日 18:54:39 作者：
一直比较迷惑：js的setTimeout到底会在什么时候执行，如果执行了，和主执行脚本到底差多长时间
由于不是很了解浏览器的内部执行策略，本文只能是通过前端一些测试依稀猜测些结论：
1）测试举例
做了两个例子：
1-1）脚本在页面中直接执行，通过刷新看结果
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript">
var t=new Date;
setTimeout(function(){
alert('cost time:'+(new Date-t))
},0);
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
测试结果：
在ie各个版本浏览器下，得到的alert结果大体为：14左后，区间为8~21毫秒之间；
chrome19，基本为1，区间为1~5之间，但是偶尔会是15左右
firefox12，基本为3，区间为2~7之间，但是偶尔也有15左右的值
safari5.1，基本为4，区间为1~7之间，但是偶尔也有15左右的值
opera11.5，基本为5，区间为2~8之间，但是偶尔有很大值
1-2）通过点击div看结果
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript">
function test(){
var t=new Date;
setTimeout(function(){
alert('cost time:'+(new Date-t))
},0);
}
</script>
</HEAD>
<BODY>
<div onclick='test()' id="div1" style="position:relative;width:200px;height:200px;background-color:green;left:100px;top:100px;">
</div>
</BODY>
</HTML>
测试结果：
在ie各个版本浏览器下，得到的alert结果大体为：5左后，偶尔有大值；
chrome19，基本为2，偶尔为3
firefox12，基本为1,0,2，但是偶尔也有13左右的值
safari5.1，基本为1，偶尔为2和3
opera11.5，基本为4,3，，但是偶尔有12左右的值。
以上测试，均在打开多个干扰复杂页面的标签、单个标签中测试。结果差不多。
2）说明什么？
其实也得不到什么结论，但是测试结果基本反映了当前流行浏览器js脚本的效率排名。
究其原因，可能得出一些印证：
2-1)由于js的主执行线程为单线程，所以此值肯定一般大于0，setTimeout的执行时间点只是加入js主执行队列中的时间点，至于什么时候执行，是由js引擎线程按顺序执行的队列来决定。此结论在很多处说到。可自行查阅（ 如：JavaScript可否多线程? 深入理解JavaScript定时机制）；
此结论也印证很火时候用setTimeout做动画不流畅的原因等。
顺便在此贴出背光的一副图很能说明问题：
总结：其实我是没有得出结论，只是好奇，然后猜测，看看可能是情况和结果，希望大家批评指正。或者有结论的答复我。
另外：setTimout函数中第二个参数如果为负数，则和0具有一样的效果，如果setTimeout(function(){console.log('test')},-100);等同于setTimeout(function(){console.log('test')},0)。
我以为会报错，结果所有浏览器都没有报错。
1）测试举例
做了两个例子：
1-1）脚本在页面中直接执行，通过刷新看结果
复制代码 代码如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript">
var t=new Date;
setTimeout(function(){
alert('cost time:'+(new Date-t))
},0);
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
测试结果：
在ie各个版本浏览器下，得到的alert结果大体为：14左后，区间为8~21毫秒之间；
chrome19，基本为1，区间为1~5之间，但是偶尔会是15左右
firefox12，基本为3，区间为2~7之间，但是偶尔也有15左右的值
safari5.1，基本为4，区间为1~7之间，但是偶尔也有15左右的值
opera11.5，基本为5，区间为2~8之间，但是偶尔有很大值
1-2）通过点击div看结果
复制代码 代码如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript">
function test(){
var t=new Date;
setTimeout(function(){
alert('cost time:'+(new Date-t))
},0);
}
</script>
</HEAD>
<BODY>
<div onclick='test()' id="div1" style="position:relative;width:200px;height:200px;background-color:green;left:100px;top:100px;">
</div>
</BODY>
</HTML>
测试结果：
在ie各个版本浏览器下，得到的alert结果大体为：5左后，偶尔有大值；
chrome19，基本为2，偶尔为3
firefox12，基本为1,0,2，但是偶尔也有13左右的值
safari5.1，基本为1，偶尔为2和3
opera11.5，基本为4,3，，但是偶尔有12左右的值。
以上测试，均在打开多个干扰复杂页面的标签、单个标签中测试。结果差不多。
2）说明什么？
其实也得不到什么结论，但是测试结果基本反映了当前流行浏览器js脚本的效率排名。
究其原因，可能得出一些印证：
2-1)由于js的主执行线程为单线程，所以此值肯定一般大于0，setTimeout的执行时间点只是加入js主执行队列中的时间点，至于什么时候执行，是由js引擎线程按顺序执行的队列来决定。此结论在很多处说到。可自行查阅（ 如：JavaScript可否多线程? 深入理解JavaScript定时机制）；
此结论也印证很火时候用setTimeout做动画不流畅的原因等。
顺便在此贴出背光的一副图很能说明问题：
总结：其实我是没有得出结论，只是好奇，然后猜测，看看可能是情况和结果，希望大家批评指正。或者有结论的答复我。
另外：setTimout函数中第二个参数如果为负数，则和0具有一样的效果，如果setTimeout(function(){console.log('test')},-100);等同于setTimeout(function(){console.log('test')},0)。
我以为会报错，结果所有浏览器都没有报错。
相关文章
FileUpload上传图片(图片不变形) 的实现方法，需要的朋友可以参考下。2010-08-08
js添加select下默认的option的value和text的方法
这篇文章主要介绍了js中创建html标签、添加select下默认的option的value和text，很实用，需要的朋友可以看看2014-10-10
深入webpack打包原理及loader和plugin的实现
这篇文章主要介绍了深入webpack打包原理及loader和plugin的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了JavaScript实现H5接金币功能,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要为大家详细介绍了JS实现网页导航条特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Javascript Dom元素获取和添加详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
下面小编就为大家带来一篇浅谈函数调用的不同方式,以及this的指向。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
允许网页宽度自动调整的"自适应网页设计"到底是怎么做到的？下面我们就来通过示例来探讨下。2015-06-06
详解TypeScript中type与interface的区别
在写 ts 相关代码的过程中，总能看到 interface 和 type 的身影。它们的作用好像都一样的，相同的功能用哪一个都可以实现，也都很好用，所以也很少去真正的理解它们之间到底有啥区别，因此本文将详细讲解二者的区别，需要的可以参考一下2022-04-04
这篇文章主要介绍了微信小程序select下拉框实现效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论