Windows对象包含了4个定时器方法,说明如下表所示:
Windows对象定时器方法列表
方法 说明setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval() 按照在指定的周期(以毫秒计)来调用函数或计算表达式
clearTimeout() 取消setTimeout()方法生成的定时器对象
clearInterval() 取消setInterval()方法生成的定时器对象
1. setTimeout()方法
setTimeout()方法在指定的时间段后执行的代码。其中拥有两个参数值,分别是code和delay,其中参数code表示要延迟执行的代码,可以包含多个语句,语句之间要用分号进行分隔,delay表示要延迟的时间,以毫秒为单位计时。
示例:当鼠标经过段落文本时时显示 “段落文本”。
var p=document.getElementsByTagName("p")[0];
p.onmouseover=function(){
setTimeout(function(){
alert(“段落文本”);
},1000);
}
也可将JavaScript代码封装在函数体内,然后引用函数作为参数传递给setTimeout()方法,这样就可以避免了传递代码众多而造成不必要的麻烦。
示例:如何为集合中每一个元素绑定延迟事件。
var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所用子元素
for(var i=0;i<o.length;i++){
o[i].onmouseover=function(i){
return function(){
f(o[i]); //将js代码封装在一个函数体中作为参数传给setTimeout
}
}(i);
}
function f(o){
var out=setTimeout(function(){
alert(o.tagName)
},500);
}
这样就可以当鼠标经过body元素下的子元素时,延迟半秒后弹出该元素的名称。
2. clearTimeout()方法
clearTimeout()方法表示在特定的情况下清除要延迟的代码,这样就可以避免了函数之间的互相干扰。
列如:当鼠标停留在某个元素时,半秒后才会弹出提示信息,一旦鼠标提前离开该元素,就立即清除前面定义的延迟处理事件函数。
var o=document.getElementsByTagName("body")[0].childNodes;
for(var i=0;i<o.length;i++){
o[i].onmouseover=function(i){
return function(){
f(o[i]);
}
}(i);
o[i].onmouseout=function(i){
return function(){
clearTimeout(o[i].out);//清除延迟处理的函数
}
}(i);
}
function f(o){
o.out=setTimeout(function(){
alert(o.tagName)
},500);
}
也可以这这样使用clearTimeout()方法:
示例:在文本框中按秒针速度显示递增的数字,当循环10次后调用clearTimeout()方法清除对延迟代码的执行,并弹出提示信息。
<body>
<input type="text" />
</body>
<script>
var t=document.getElementsByTagName("input")[0];
var i=1;
function f(){
var out=setTimeout(
function(){
t.value=i++;
f();
},1000);
if(i>10){
clearTimeout(out);
alert("时间到");
}
}
f();
</script>
3. setInterval()方法