setTimeout的延时为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做动画不流畅的原因等。
　　顺便在此贴出背光的一副图很能说明问题：

3-2）测试偶尔的很大值，也有可能是js主执行线程中做了其他事情，如GC等。因为大值重复出现几率很少。
　
总结：其实我是没有得出结论，只是好奇，然后猜测，看看可能是情况和结果，希望大家批评指正。或者有结论的答复我。
另外：setTimout函数中第二个参数如果为负数，则和0具有一样的效果，如果setTimeout(function(){console.log('test')},-100);等同于setTimeout(function(){console.log('test')},0)。
我以为会报错，结果所有浏览器都没有报错。

赞 (0)

相关推荐

  • JQuery中SetTimeOut传参问题探讨

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数.如果想要传入参数,自定义参数也好,事件参数event也好,解决办法是在此函数的基础上在做一层封装.其具体原理还不清楚,但是下边的办法确实能解决这个问题. 先看一个简单的代码: 复制代码 代码如下: function show(){ alert("Hello World"); } setTimeout(show,1000); 这段代码的效果是在1秒后显示hello w

  • 5秒后跳转效果(setInterval/SetTimeOut)

    setInterval版 复制代码 代码如下: $(function () { setInterval(function () { var time = $("#time").text(); time = parseInt(time); time--; if (time >0) { $("#time").text(time); } else { window.location = $("#url").attr("href"

  • setTimeout函数兼容各主流浏览器运行执行效果实例

    目前这个setTimeout可以很好地兼容IE6,7,8,9以及谷歌浏览器Chrome,火狐浏览器FireFox,苹果浏览器Safari,Opera. setTimeout是一个很不错的函数,网站页面前端工程师经常将其用于几秒后执行的动作.setTimeout这个JS内置函数其用法也很简单,下面是setTimeout()的函数说明以及用法详解和实例.示例代码: setTimeout()的作用是指定在多少毫秒后执行一个JS函数或者表达式代码 setTimeout的用法.语法.参数:setTimeo

  • Jquery倒数计时按钮setTimeout的实例代码

    复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>    <script type="text/javascript">        var timeout;    

  • Jquery中使用setInterval和setTimeout的方法

    方法1. 应用jQuery的扩展可以解决这个问题. 复制代码 代码如下: $(document).ready(function(){$.extend({  show:function(){   alert("ready");  }});setInterval("show()",3000);}); 方法2. 指定定时执行的函数时不要使用引号和括号. 复制代码 代码如下: $(function(){function show(){   alert("ready

  • jQuery中setTimeout的几种使用方法小结

    我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数: 复制代码 代码如下: <div id="div_debug"></div> <script src="http://www.studyday.net/demo/jquery.js"></script>  <script language="JavaScript">  funct

  • jQuery setTimeout()函数使用方法

    setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用. 我在 复制代码 代码如下: $(document).ready(function(){setTimout(test(),200); function test() { alert(1); } }); 只会执行一次,有朋友说可以使用 复制代码 代码如下: setInterval ("showTime()", 5000);function showTi

  • setTimeout的延时为0时多个浏览器的区别

    setTimeout的延时为0时多个浏览器的区别

    由于不是很了解浏览器的内部执行策略,本文只能是通过前端一些测试依稀猜测些结论: 1)测试举例 做了两个例子: 1-1)脚本在页面中直接执行,通过刷新看结果 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <script type="text/javascript"> var t=new Date; setTimeout(function(){ alert('cost time:'+(new Date-t)

  • setTimeout时间设置为0详细解析

    前言 本文主要给大家介绍了关于setTimeout时间设置为0的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.开胃菜,setTimeout为何物 首先看一下w3school上面对于setTimeout的解释 setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式. 很简单,setTimeout() 只执行 fn 一次,到底什么时候执行取决于第二个参数millisec设定的毫秒数,所以很多人习惯上称之为延迟,无非就是延迟一段时

  • Mybatis Integer类型参数值为0时得到为空的解决方法

    今日遇到的问题: 查询版本信息时,由于version是Integer类型,所以当前台选择版本为0时,变成了查询了所有的版本信息. sql片段: </if> <if test="version != null and version != '' "> AND a.version = #{version} </if> 原因: MyBatis因自身原因默认了 Integer类型数据值等于0时 为 ""(空字符串) 解决办法: 1. 某些

  • mysql迁移至8.0时的注意事项(小结)

    密码模式 PDO::__construct(): The server requested authentication method unknown to the client [caching_sha2_password] mysql8 之后,默认的密码模式改为 caching_sha2_password,新的模式需要新的驱动,至少现在 pdo / navicat 还没给出,所以我们还是得切换成老的 mysql_native_password 模式. `mysql_native_passwo

  • jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题

    今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户积分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").replaceWi

  • 通过JS和PHP两种方法判断用户请求时使用的浏览器类型

    在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko)

  • vue2.0/3.0的响应式原理及区别浅析

    vue2.0/3.0的响应式原理及区别浅析

    前言 自从vue3.0正式上线以来,好多小伙伴都转战vue3.0了,这里把我自己总结的3.0和2.0的原理以及他俩的区别写出来,方便自己学习. step 一,vue2.0的响应式原理 先看看官网的解释: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性

  • ThinkPHP6.0前置、后置中间件区别

    ThinkPHP6.0前置、后置中间件区别

    目录 1. 创建中间件 2. 注册中间件 3. 前置.后置中间件 4. 前置.后置中间件的区别 5. 后置中间件登录拦截器(不推荐) 6. 前置中间件登录拦截器(推荐使用) 1. 创建中间件 命令行创建中间件类文件示例 // app\middleware\Auth php think make:middleware Auth // app\middleware\admin\Auth php think make:middleware admin/Auth // app\admin\middlew

  • Python3.0与2.X版本的区别实例分析

    本文通过列举出一些常见的实例来分析Python3.0与2.X版本的区别,是作者经验的总结,对于Python程序设计人员来说有不错的参考价值.具体如下: 做为一个前端开发的码农,最近通过阅读最新版的<A byte of Python>并与老版本的<A byte of Python>做对比后,发现Python3.0在某些地方还是有些改变的.之后再查阅官方网站的文档,总结出一下区别: 1. 如果你下载的是最新版的Python,就会发现所有书中的Hello World例子将不再正确. Py

  • Nuxt升级2.0.0时出现的问题(小结)

    喜大普奔,Nuxt终于正式发布2.0了,最近趁热把博客从1.4升级到了2.0,并且用Typescript重构了下,可以点Jooger.me看下,在升级Nuxt过程中出现了一个小问题 关于release 2.0的公告可以查看官网的Release Notes以及官方的Demo,升级过程十分简单,基本不需要什么迁移成本,所有npm命令都跟以前一样,只需要把一些关联包升级一下即可 今天出现的问题是这样的,随着nuxt升级,webpack和vue-loader也分别升级到了4和15,升级过后,报了如下问题

随机推荐