window对象包含4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时运行,避免连续执行,这样可以设计动画
方法 | 说明 |
setInterval() | 按照指定的周期,(以毫秒为单位)来调用函数或计算表达式 循环执行 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 执行一次 |
clearInterval() | 取消由setInterval()方法生成的定时器对象 |
clearsetTimeout() | 取消由setTimeout()方法生成的定时器对象 |
setTimeout()方法
setTimeout()方法能够在指定的时间段后执行特定代码,用法如:
var o=setTimeout(code,delay)
参数code表示要延迟执行的代码字符串,该字符串语句可以在window环境下执行,如果包含多个语句,应该使用分号进行分割。
delay表示延迟的时间,以毫秒为单位,该方法返回的值是一个TimerID,这个ID编号指向延迟执行的代码控制句柄,如果把这个句柄
传递给clearTimeout()方法,则会取消代码的延迟执行。
var p=document.getElementsByTagName("p")[0];
p.onclick=function(){
var b=setTimeout(function(){
alert(p.style.color="red");
},5000); clearTimeout(b); //清除timeout延迟
}
setTimeout()方法的第1个参数虽然是字符串,但是我们也可以把javascript代码封装在一个函数体内,然后把喊出引用作为参数传递给setTimeout()方法,
等待延迟调用,这样就避免了传递字符串的疏漏和麻烦。注意:函数可以作为参数,作为值,作为表达式
setInterval()方法
使用setTimeout()方法模拟循环执行指定代码,不如直接setInterval()方法来实现,setInterval()方法能够周期性执行指定的代码,如果不加以处理,那么该方法将会被持续
执行,知道浏览器窗口关闭,或者跳转到其他页面为止。用法如下
var a=setInterval(code,Interval);
该方法的用法与setTimeout()方法基本相同,其中参数code表示要周期执行的代码字符串,而Interval参数表示周期执行的时间间隔,以毫秒为单位,该方法返回的值是一个TimerID
,这个ID编号指向对当前周期函数的执行引用,利用该值对计时器进行访问,如果把这个值传递给clearInterval()方法,则会强制取消周期性执行的代码。
var p=document.getElementsByTagName("p")[0];
var out=setInterval(f,1000);
var i=0;
function f(){
p.innerText=i++;
if(i>10){
clearInterval(out);
alert("10秒钟已经到了");
}
}