setTimeout设置为0的作用
2016-03-21 11:13
531 查看
调用方式：
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
功能：
Evaluates an expression after a specified number of milliseconds has elapsed. 在 超过一定的时间间隔（iMilliSeconds,这个参数以毫秒为单位，如果你输入1000，则表示一秒）之后执行表达式vCode,这个vCode可 以是一段程序，亦可以是一个函数指针，即函数名称。
例如：
window.setTimeout("alert('Hello, world')", 1000);
或函数指针
function func1() {alert("Hello, world");}
window.setTimeout(func1, 1000);
注意，在第二种调用方法中，你是不能向函数传递参数的，
例如：
function func2(message) { alert( message ); }
像以下的调用方式：
window.setTimeout(func2("Hello world"), 1000);
将产生“参数无效”的错误， 因为该写法是在调用func2方法，并非向 setTimeout 传递一个函数指针 。
要避免这种错误，那么就写成第一种方式好了：window.setTimeout("func2('Hello world')", 1000);
这个 window.setTimeout 方法的返回值什么呢？ window.setTimeout 亦可解释为 “ 延迟执行 ”。
例如 window.setTimeout(func1, 5000); 表示，func1() 函数，并不在该语句执行时立即执行，
而是从该语句执行后算起，延后 5 秒执行。所以，window.setTimeout 方法的返回值本质上就是这个 “ 延迟执行 ”的进程的ID。（根《JavaScript高级程序设计》一书）。如果你在这 5 秒的等待过程中，想取消
这个进程，那个这个ID就会起作用了。通过调用 window.clearTimeout(iTimeoutID) 方法，并向该方法中传递
你在 iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage]) 中获得的ID，即可取消延迟执行。
因此，如果你想要取消 延迟执行 ，所定义的变量 iTimerID 必须是一个全局变量（global variable ）。
setInterval 介绍：
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage]) 该方法与 window.setTimeout
方法最大的区别是：该方法执行多次，即按一定的时间间隔不断地执行。其他方面，都是相同的。
要取消执行，可以调用。window.clearInterval(iIntervalID) 方法。
提示：如果我们在 window.setTimeout 调用的函数中，再调用一次 window.setTimeout 方法，那不是实现了
setInterval 的效果
setTimeout为0的应用
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
<title> setTimeout为0的应用 </title>
<style type ="text/css">
body { background : url(images/page-bg.gif) ; font-size : 14px ; }
</style>
</head>
<body>
<h1> setTimeout为0的应用 </h1>
<p> 在下面两个输入框里输入字符，看看有什么不同？ </p>
<p>
A： <input type ="text" id ="t1" name ="t1"
onkeydown ="document.getElementById('t1text').innerHTML='你输入了：'+this.value;" value ="" /> 没有使用setTimeout
</P>
<div id ="t1text"> 你输入了： </div>
<p>
B： <input type ="text" id ="t2" name ="t2"
onkeydown ="var t2=this;setTimeout(function(){document.getElementById('t2text').innerHTML='你输入了：'+t2.value},0);"
value ="" /> setTimeout为0 </p>
<div id ="t2text"> 你输入了： </div>
</body>
</html>
类似起线程。前者没用settimeout ，所以是主线程去做的响应，所以在onkeydown 就触发事件执行。得到的数据会有差异。
setTimeout与setInterval是window对象的两个非常 神奇方法，用于实现定时或延时调用一个函数或一段代码。
（新手可能认为setTimeout与setInterval是javascript函数，这是错误的。新手容易将javascript对象函数与DOM对象方法混淆。）
先来一段代码，大家猜猜在各种浏览器下的结果会是怎么样的呢？
JScript code function f(){
var s =
' arguments.length: ' + arguments.length + ' ; ' ;
for ( var i = 0 ,n = arguments.length;i < n;i ++ ){
s +=
' [ ' + i + ' ]: ' + arguments + ' ; ' ;
}
alert(s);
}
setTimeout(f, 500 , " javascript " , " AAA " )
我这里要探讨的，不是什么时候该用哪一个，而是探讨这两个方法在各浏览器中的差异。
原先我一直没觉得这两个方法会有什么乌龙，一个偶然的机会让我得知了，现在整理一下写出来和大家分享。
因为setTimeout与setInterval的参数和用法是一样的，只是 功能 不同，所以，为了省事，我下面只以setTimeout为例进行说明以及举例。
setTimeout被最经常用到的形式大概是如下2种样子的：
JScript code
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中，以下两种都是对的。
JScript code 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');
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
功能：
Evaluates an expression after a specified number of milliseconds has elapsed. 在 超过一定的时间间隔（iMilliSeconds,这个参数以毫秒为单位，如果你输入1000，则表示一秒）之后执行表达式vCode,这个vCode可 以是一段程序，亦可以是一个函数指针，即函数名称。
例如：
window.setTimeout("alert('Hello, world')", 1000);
或函数指针
function func1() {alert("Hello, world");}
window.setTimeout(func1, 1000);
注意，在第二种调用方法中，你是不能向函数传递参数的，
例如：
function func2(message) { alert( message ); }
像以下的调用方式：
window.setTimeout(func2("Hello world"), 1000);
将产生“参数无效”的错误， 因为该写法是在调用func2方法，并非向 setTimeout 传递一个函数指针 。
要避免这种错误，那么就写成第一种方式好了：window.setTimeout("func2('Hello world')", 1000);
这个 window.setTimeout 方法的返回值什么呢？ window.setTimeout 亦可解释为 “ 延迟执行 ”。
例如 window.setTimeout(func1, 5000); 表示，func1() 函数，并不在该语句执行时立即执行，
而是从该语句执行后算起，延后 5 秒执行。所以，window.setTimeout 方法的返回值本质上就是这个 “ 延迟执行 ”的进程的ID。（根《JavaScript高级程序设计》一书）。如果你在这 5 秒的等待过程中，想取消
这个进程，那个这个ID就会起作用了。通过调用 window.clearTimeout(iTimeoutID) 方法，并向该方法中传递
你在 iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage]) 中获得的ID，即可取消延迟执行。
因此，如果你想要取消 延迟执行 ，所定义的变量 iTimerID 必须是一个全局变量（global variable ）。
setInterval 介绍：
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage]) 该方法与 window.setTimeout
方法最大的区别是：该方法执行多次，即按一定的时间间隔不断地执行。其他方面，都是相同的。
要取消执行，可以调用。window.clearInterval(iIntervalID) 方法。
提示：如果我们在 window.setTimeout 调用的函数中，再调用一次 window.setTimeout 方法，那不是实现了
setInterval 的效果
setTimeout为0的应用
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
<title> setTimeout为0的应用 </title>
<style type ="text/css">
body { background : url(images/page-bg.gif) ; font-size : 14px ; }
</style>
</head>
<body>
<h1> setTimeout为0的应用 </h1>
<p> 在下面两个输入框里输入字符，看看有什么不同？ </p>
<p>
A： <input type ="text" id ="t1" name ="t1"
onkeydown ="document.getElementById('t1text').innerHTML='你输入了：'+this.value;" value ="" /> 没有使用setTimeout
</P>
<div id ="t1text"> 你输入了： </div>
<p>
B： <input type ="text" id ="t2" name ="t2"
onkeydown ="var t2=this;setTimeout(function(){document.getElementById('t2text').innerHTML='你输入了：'+t2.value},0);"
value ="" /> setTimeout为0 </p>
<div id ="t2text"> 你输入了： </div>
</body>
</html>
类似起线程。前者没用settimeout ，所以是主线程去做的响应，所以在onkeydown 就触发事件执行。得到的数据会有差异。
setTimeout与setInterval是window对象的两个非常 神奇方法，用于实现定时或延时调用一个函数或一段代码。
（新手可能认为setTimeout与setInterval是javascript函数，这是错误的。新手容易将javascript对象函数与DOM对象方法混淆。）
先来一段代码，大家猜猜在各种浏览器下的结果会是怎么样的呢？
JScript code function f(){
var s =
' arguments.length: ' + arguments.length + ' ; ' ;
for ( var i = 0 ,n = arguments.length;i < n;i ++ ){
s +=
' [ ' + i + ' ]: ' + arguments + ' ; ' ;
}
alert(s);
}
setTimeout(f, 500 , " javascript " , " AAA " )
我这里要探讨的，不是什么时候该用哪一个，而是探讨这两个方法在各浏览器中的差异。
原先我一直没觉得这两个方法会有什么乌龙，一个偶然的机会让我得知了，现在整理一下写出来和大家分享。
因为setTimeout与setInterval的参数和用法是一样的，只是 功能 不同，所以，为了省事，我下面只以setTimeout为例进行说明以及举例。
setTimeout被最经常用到的形式大概是如下2种样子的：
JScript code
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中，以下两种都是对的。
JScript code 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');
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MATLAB r2014a 下载+安装+激活
- 菜鸟成长记
- 蓝桥杯-算法训练--ALGO-8 操作格子
- 使用 HTMLTestRunner.py
- SaaS开发需要的技能
- 331. Verify Preorder Serialization of a Binary Tree
- 华为OJ--整型数排序
- PHP 获取指定URl页面中所有链接
- js调用中文乱码问题
- webpack 独立打包 css 文件
- QQ日志
- iOS沙盒与清除缓存
- 如何在HTTP客户端与服务器端之间保持状态
- ECSHOP取得国家列表，如果有收货人列表，取得省市区列表
- dedecms 调用栏目(分类)的文章总数
- Notice: Undefined offset: 1 in D:\\wwwroot\\wr\\askseo\\404.php on line 5
- DedeCMS下data日志mysql_error_trace.inc暴露后台地址
- [dede漏洞]dede 爆后台 路径，dede后台地址查询
- 织梦某处设计缺陷导致后台地址泄露 | WooYun-2014-76556 | WooYun
- 百度站长平台“爆”dede后台直取webshell