setTimeout与setInterval在不同浏览器下的差异
发布时间:2024-04-23 09:23:54
。(新手可能认为setTimeout与setInterval是javascript函数,这是错误的。新手容易将javascript对象函数与DOM对象方法混淆。)
先来一段代码,大家猜猜在各种浏览器下的结果会是怎么样的呢?
function f(){
var s = 'arguments.length:'+arguments.length+'; ';
for(var i=0,n=arguments.length;i< n;i++){
s += ' ['+i+']:'+arguments[i]+'; ';
}
alert(s);
}
setTimeout(f,500,"javascript","AAA")
我这里要探讨的,不是什么时候该用哪一个,而是探讨这两个方法在各浏览器中的差异。
原先我一直没觉得这两个方法会有什么乌龙,一个偶然的机会让我得知了,现在整理一下写出来和大家分享。
因为setTimeout与setInterval的参数和用法是一样的,只是功能不同,所以,为了省事,我下面只以setTimeout为例进行说明以及举例。
setTimeout被最经常用到的形式大概是如下2种样子的:
iTimerID = setTimeout(strJsCode, 50) //strJsCode为一个包含js代码的字符串
iTimerID = setTimeout(objFunction, 50) //objFunction为一个函数对象
第一种调用方式是传包含js代码的字符串,这种方式的好处是简洁,但坏处是运行效率差,而且不利于语法解析,有潜在风险,更重要的是,处理比较复杂的内容比较费劲,这一点和eval的弊端是一致的。
所以,我们认为,通常应当采用第二种方式调用为好。(后面我的例子均采用第2种调用方式)
现在来揭晓开头那一段代码在各种浏览器下的结果:
IE(6,7,8)是: arguments.length:0;
Opera(6,7,8)是: arguments.length:2; [0]:javascript; [1]:AAA;
Firefox(3.0)是: arguments.length:3; [0]:javascript; [1]:AAA; [2]:-15;
竟然有这么大的差别,还真是“你唱你的曲,我哼我的调”!
Firefox(3.0)下,得出的最后一个数字是不特定的,有时候是0,有时候是一个负数,这问题后面再说。
(一)IE系列中的setTimeout
首先,我们看看微软出的DHTML参考手册中是如何说的:
setTimeout Method
Evaluates an expression after a specified number of milliseconds has elapsed.
Syntax
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
Parameters
vCode Required. Variant that specifies the function pointer or string that indicates
the code to be executed when the specified interval has elapsed.
iMilliSeconds Required. Integer that specifies the number of milliseconds.
sLanguage Optional. String that specifies one of the following values:
JScript Language is JScript.
VBScript Language is VBScript.
JavaScript Language is JavaScript.
MSDN上关于setTimeout的说明:
http://msdn.microsoft.com/en-us/library/ms536753(VS.85).aspx
也就是说,setTimeout接收3个参数,第3个参数表示脚本语言的类型,如果你再传入更多的参数,是无意义的。
因此,在IE中,以下两种都是对的。
setTimeout('alert(1)', 50);
setTimeout('msgbox "终止、重试、忽略,您看着办吧。", vbAbortRetryIgnore + vbDefaultButton2, "告诉您"', 50, 'VBScript');
(二)Mozilla系列中的setTimeout
我们看看Mozilla官方网站上 Gecko DOM Reference 手册中是如何说的:
window.setTimeout
Summary
Executes a code snippet or a function after specified delay.
Syntax
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);
前两个参数都一样,没差别,从第三个参数就不同了。
因为目前只有IE浏览器支持多种语言的脚本,其它浏览器只支持js脚本所以不需要传语言类型的参数。
Mozilla把传给setTimeout的第3个以及更后面的更多参数依次的传给前面的func做为参数。
Firefox, Opera, Safari, Chrome等等也都是如此。
但是注意到,Mozilla上说了他家的setTimeout有一个叫做"Lateness" argument的BUG.
"Lateness" argument
Functions invoked by setTimeout are passed an extra "lateness" argument in Mozilla,
i.e., the lateness of the timeout in milliseconds. (See bug 10637 and bug 394769.)
这就是开头那个例子中,Firefox(3.0)下有一个乌龙数字的根源。
Mozilla上关于setTimeout的说明:
https://developer.mozilla.org/en/DOM/window.setTimeout
(三)其它浏览器系列(Opera, Safari, Chrome)中的setTimeout
和Mozilla系列中的基本一样,但是没有Mozilla系列中的多一个参数的BUG.
武林外传:使用setTimeout的小技巧
(1)IE中给setTimeout中的调用函数传参数
上面的分析可知,IE是不支持在setTimeout中给被调用的函数传参数的,为了浏览器世界的和谐,我们可以把函数调用参数包裹进新的匿名函数中。示例:
function f(a){
alert(a);
}
// setTimeout(f,50,'hello'); //用于非IE
setTimeout(function(){f('hello')},50); //通用
var str='hello';
setTimeout(function(){f(str)},50); //通用
(2)this问题
setTimeout调用的函数被执行时的上下文是全局,而不再是调用setTimeout方法时的上下文。所以,setTimeout的第一个参数的函数被执行时其this是指向window的,如果需要保留调用setTimeout方法时的this,就需要把当时的this传进去。示例:
function Person(name){
this.name=name;
var f=function(){alert('My name is '+this.name)};
// setTimeout(f,50); //错误
var THIS=this;
setTimeout(function(){f.apply(THIS)},50); //正确,通用
setTimeout(function(){f.call(THIS)},50); //正确,通用
}
new Person('Jack');
要说的就这些了。
发帖子不是脑力活,其实是体力活,组织文字,写例子,排版,这些没技术含量的事情是最累人最耗时间的。


猜你喜欢
- permute(dims)将tensor的维度换位。参数:参数是一系列的整数,代表原来张量的维度。比如三维就有0,1,2这些dimensio
- 一、io包中接口的好处和优势1.1拷贝数据的函数io.Copy(dst Writer, src Reader)io.CopyBuffer(d
- 一、动机(Motivate)在软件构建过程中,某些对象使用的算法可能多种多样,经常改变,如果将这些算法都编码到对象中,将会使对象变得异常复杂
- 背景图像领域内的一个国内会议快要召开了,要发各种邀请邮件,之后要录入、统计邮件回复(参会还是不参会等)。如此重要的任务,老师就托付给我了。p
- 形参与实参以及位置参数 什么是形参和实参形参:即形式参数,函数定义时指定的可以接受的参数即为形参,比如定义函数时的max(a,b)函数中的a
- 一、分组原理核心:1、不论分组键是数组、列表、字典、Series、函数,只要其与待分组变量的轴长度一致都可以传入groupby进行分组。2、
- 本文实例讲述了php实现的支持断点续传的文件下载类及其用法,是非常实用的技巧。分享给大家供大家参考。具体方法如下:通常来说,php支持断点续
- 我们曾经提到,Oyster.com的Python web服务器怎样利用一个巨大的Python dicts(hash table),缓存大量的
- 一,为了让xadmin 登录者只能看到自己创建的数据1,modelclass UserTB(models.Model): nam
- 如下所示:string =" { "status": "error", "mes
- length: 是计算字段的长度一个汉字是算三个字符,一个数字或字母算一个字符CHAR_LENGTH(str) 返回
- 最近学习了一点python,那就试着做一做简单的编程练习。 首先是这个编程的指导图,如下:对的,类似一个简单区块链的模拟。 代码如下:cla
- 数据库引擎以InnoDB为主1.磁盘碎片是什么InnoDB表的数据存储在页中,每个页可以存放多条记录,这些记录以树形结构组织,这棵树称为B+
- 第1章 ansible软件概念说明python语言是运维人员必会的语言,而ansible是一个基于Python开发的自动化运维工具 (sal
- 以住做B/S的系统都是以IE浏览器为主,基本上忽略其他的浏览器,这次决定来个大兼容,但在实现背景渐变上就是个 * 烦。本想用图片来实现的,但要
- 字体的处理在网页设计中无论怎么强调也不为过, 毕竟网页使用来传递信息的, 而最经典最直接的信息传递方式就是文字,&nbs
- 首先,自学Python是能够找到相关工作的。Python语言在近几年的上升趋势非常明显,语言生态也越来越健全,在Web开发、大数据开发、人工
- 程序流Python 解释器在其最简单的级别,以类似的方式操作,即从程序的顶端开始,然后一行一行地顺序执行程序语句。例如,清单 1 展示了几个
- Bulk 方式进行目标数据的Load,是Informatica提供的一种高性能的Load数据方式。它利用数据库底层机制,依靠调用数据库本身提
- 1、异常出现的场景.:在使用Hibernate做为项目持久层的情况下,需要对某一张表进行一个扩展,扩展操作便是在该表上创建一个触发器。将表中