Javascript计时器实例源码介绍



Javascript计时器实例源码介绍。JavaScript的代码,FireFox用FireBug

FireFox浏览器不会提供window.event,而IE会提供的

在JavaScript中,可以创建两种类型的计时器,即一次性计时器和间隔性触发计时器。一次性计时器仅在指定的延迟时间之后触发一次,而间隔性触发计时器每隔一定的时间间隔就触发一次。在下面的小节中,我们将详细讨论这两种计时器。

实际上,在JavaScript中可以根据需要设置多个计时器,并在代码中的任何地方启动计时器,例如在浏览器窗口的onload事件中启动计时器,或者在单击一个按钮时启动计时器。计时器常用在每隔一定间隔后翻转广告图片的情形,或者在Web页面中显示一个实时更新的时钟。另外,使用DHTML所创建的各种动画,都需要使用计时器的setTimeout()方法或者setInterval()方法

一次性计时器
要设置一个一次性计时器非常简单:只需使用window对象的setTimeout()方法。

window.setTimeout(“your JavaScript code”, milliseconds_delay)

setTimeout()方法接收两个参数,第一个参数是要执行的JavaScript代码,第二个参数是计时器延迟的时间,延迟时间是以毫秒(即千分之一秒)为单位的,当延迟时间结束时,第一个参数中的代码将被执行。

setTimeout()方法将返回一个值,该值是一个整数,这是唯一标识该计时器的一个ID号。如果在计时器启动后想要停止计时器,在JavaScript就可以使用该ID号来引用相应的计时器。


要清除一个计时器,可以使用window对象的clearTimeout()方法。该方法仅接收一个参数,即由setTimeout()方法返回的唯一的计时器ID号。

创建间隔性触发计时器
在较新版本的浏览器中,window对象提供了一些新的方法用以设置计时器,即setInterval()方法和clearInterval()方法。除了所设置的计时器每隔一定时间间隔就触发一次外,这两个方法的工作方式与setTimeout()方法和clearTimeout()方法非常类似。

与setTimeout()方法类似,setInterval()方法接收两个参数,第一个参数表示计时器到点时要执行的代码,不同的是,第二个参数不再表示计时器触发之前的时间延迟,而是表示一个时间间隔,该间隔以毫秒为单位,每隔这个时间间隔之后,计时器就将触发一次。

例如,要设置一个每隔5s就触发一次myFunction()函数的计时器,可以使用如下所示的代码:

var myTimerID = setInterval(“myFunction()”,5000);

与setTimeout()方法类似,setInterval()方法也返回一个计时器唯一的ID号,如果要清除该计时器,可以使用clearInterval()方法,并将该ID号作为参数传入即可。clearInterval()方法与clearTimeout()方法非常类似,因此,要停止前面代码中启动的计时器,可以使用如下所示的代码:

clearInterval(myTimerID);