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秒钟已经到了"); } }
setTimeout和setInterval方法在用法上有几分相似,不过两者的作用区别也很明显,setTimeout方法主要用来延迟代码执行的,而setInterval方法主要实现周期性执行代码。