在Web页面中使用计时器
在Web页面中使用计时器
在JavaScript中，可以创建两种类型的计时器，即一次性计时器和间隔性触发计时器。一次性计时器仅在指定的延迟时间之后触发一次，而间隔性触发计时器每隔一定的时间间隔就触发一次。在下面的小节中，我们将详细讨论这两种计时器。
实际上，在JavaScript中可以根据需要设置多个计时器，并在代码中的任何地方启动计时器，例如在浏览器窗口的onload事件中启动计时器，或者在单击一个按钮时启动计时器。计时器常用在每隔一定间隔后翻转广告图片的情形，或者在Web页面中显示一个实时更新的时钟。另外，使用DHTML所创建的各种动画，都需要使用计时器的setTimeout()方法或者setInterval()方法—— 在本书的第12章和13章，我们将介绍DHTML的相关内容。
9.2.1 一次性计时器
要设置一个一次性计时器非常简单：只需使用window对象的setTimeout()方法。
window.setTimeout("your JavaScript code", milliseconds_delay)
setTimeout()方法接收两个参数，第一个参数是要执行的JavaScript代码，第二个参数是计时器延迟的时间，延迟时间是以毫秒(即千分之一秒)为单位的，当延迟时间结束时，第一个参数中的代码将被执行。
setTimeout()方法将返回一个值，该值是一个整数，这是唯一标识该计时器的一个ID号。如果在计时器启动后想要停止计时器，在JavaScript就可以使用该ID号来引用相应的计时器。
例如，要设置一个在页面加载3秒之后触发的计时器，可以使用如下所示的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript">
var timerID;
function window_onload()
{
timerID = setTimeout("alert(‘Times Up!’)",3000);
alert("Timer Set");
}
</script>
</head>
<body language = JavaScript onload="window_onload()">
</body>
</html>
将上面的代码保存为timertest.htm，并在浏览器中加载该文件。在浏览器窗口的onload事件之后延迟3000毫秒(即3秒钟)之后，将弹出一个消息对话框。
尽管setTimeout()方法是window对象的方法，但由于window对象位于浏览器对象模型层次结构的顶端，所以在引用window对象的属性或者方法时并不需要使用window对象名。因此，我们也可以将window.setTimeout()方法简写为setTimeout()方法。
值得注意的是，当设置一个计时器时并不会停止脚本代码的继续执行。计时器将在后台运行并在延迟到点之后触发。在这期间，页面将像往常一样运行，并且任何在启动计时器倒计时之后的代码都将继续执行。因此，在上面的例子中，在设置计时器的代码被执行之后，alert("Timer Set")语句将立即被执行，以弹出一个消息对话框，说明计时器已经被设置。
但是，如果要在计时器触发之前，停止计时器的执行，又该怎么办呢？
要清除一个计时器，可以使用window对象的clearTimeout()方法。该方法仅接收一个参数，即由setTimeout()方法返回的唯一的计时器ID号。
下面的代码修改了前面的例子，以提供一个按钮，当单击按钮时将停止计时器的执行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language=JavaScript type="text/javascript">
var timerID;
function window_onload()
{
timerID = setTimeout("alert(‘Times Up!’)",3000);
alert("Timer Set");
}
function butStopTimer_onclick()
{
clearTimeout(timerID);
alert("Timer has been cleared");
}
</script>
</head>
<body onload="window_onload()">
<form name=form1>
<input type="button" value="Stop Timer" name=butStopTimer language=JavaScript
onclick="return butStopTimer_onclick()">
</form>
</body>
</html>
将上面的代码保存为timertest2.htm，并在浏览器中加载该文件。如果在3秒钟的延迟到点之前，单击Stop Timer按钮，则该计时器将被清除。在代码中，Stop Timer按钮的onclick事件处理器被连接到了butStopTimer_onclick()事件处理函数，在该事件处理函数中，使用了window对象的clearTimeout()方法，将ID号为timerID的计时器清除。
在下面的例子中，我们将使用setTimeout()方法来更新广告标语。下面的代码将创建一个具有广告标语的Web页面，每隔3秒钟广告标语将更新一次。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language=JavaScript type="text/javascript">
var currentImgNumber = 1;
var numberOfImages = 3;
function window_onload()
{
setTimeout("switchImage()",3000);
}
function switchImage()
{
currentImgNumber++;
document.imgAdvert.src = "AdvertImage" + currentImgNumber + ".jpg";
if (currentImgNumber < numberOfImages)
{
setTimeout("switchImage()",3000); }
}
</script>
</head>
<body onload="window_onload()">
<img src="AdvertImage1.jpg" name="imgAdvert">
</body>
</html>
在编辑器中输入上面的代码，并保存为Adverts.htm文件。另外，我们还需要创建三个图形文件：AdvertImage1.jpg、AdvertImage2.jpg和AdvertImage3.jpg文件(或者，也可以从本书的代码下载中获得这三个文件)。当页面被加载时，开始时将看到一个AdvertImage1.jpg图片，如图9-5所示。
图 9-5
3秒钟之后，该页面将显示第二幅图片，如图9-6所示。
图 9-6
最后，再经过3秒钟时间，将显示第三幅图片，也就是最后一幅图片，如图9-7所示。
图 9-7
代码解说
当页面加载时，<img>标记的src属性被设置为第一幅图片的文件名：
<img src="AdvertImage1.jpg" name="imgAdvert">
在<body>标记中，将window对象的onload事件处理器连接到了window_onload()事件处理函数。window_onload()函数如下所示：
function window_onload()
{
setTimeout("switchImage()",3000)
}
在window_onload()函数中，使用了setTimeout()方法以启动计时器的运行，该计时器将在延迟3s后调用switchImage()函数。因为这个计时器不需要清除处理，所以不必考虑保存setTimeout()方法所返回的计时器ID的值。
switchImage()函数用以改变页面中<img>标记所对应的img对象的src属性的值：
function switchImage()
{
currentImgNumber++;
document.imgAdvert.src = "AdvertImage" + currentImgNumber + ".jpg";
标语图片名中的数字是从1到3，即AdvertImage1.jpg、AdvertImage2.jpg、AdvertImage3.jpg。可以将页面中加载的当前标语图片的编号保存在全局变量currentImgNumber中，该变量定义于脚本块的顶部，并被初始化为1。要获得下一幅图片的编号，只需简单地将变量currentImgNumber的值加1，然后使用变量currentImgNumber的值来构造表示图片文件名的完整字符串，再修改img对象的src属性，以更新页面所加载的图片。
if (currentImgNumber < numberOfImages)
{
setTimeout("switchImage()",3000);
}
}
要显示的标语图片有三幅，变量currentImgNumber中保存的是当前图片的编号。因此，在上面的if语句中，将对变量currentImgNumber的值进行检查，以确定该变量的值是否小于3。如果小于3，则表示还有图片需要显示，因此设置另一个新的计时器，以启动一个新的倒计时触发。当再经过3s之后，该计时器将再次调用switchImage()函数。
在一些早期的浏览器中，只能使用上面的办法来创建每隔一定时间间隔就触发的计时器。但是，对于4.0版本以上的浏览器，还可以使用下面小节将要介绍的简单方法，以创建间隔性触发计时器。
9.2.2 创建间隔性触发计时器
在较新版本的浏览器中，window对象提供了一些新的方法用以设置计时器，即setInterval()方法和clearInterval()方法。除了所设置的计时器每隔一定时间间隔就触发一次外，这两个方法的工作方式与setTimeout()方法和clearTimeout()方法非常类似。
与setTimeout()方法类似，setInterval()方法接收两个参数，第一个参数表示计时器到点时要执行的代码，不同的是，第二个参数不再表示计时器触发之前的时间延迟，而是表示一个时间间隔，该间隔以毫秒为单位，每隔这个时间间隔之后，计时器就将触发一次。
例如，要设置一个每隔5s就触发一次myFunction()函数的计时器，可以使用如下所示的代码：
var myTimerID = setInterval("myFunction()",5000);
与setTimeout()方法类似，setInterval()方法也返回一个计时器唯一的ID号，如果要清除该计时器，可以使用clearInterval()方法，并将该ID号作为参数传入即可。clearInterval()方法与clearTimeout()方法非常类似，因此，要停止前面代码中启动的计时器，可以使用如下所示的代码：
clearInterval(myTimerID);
下面我们来修改一下前面例子中的世界时转换器，以在页面中显示一个本地时间和所选中城市时间的实时更新的时钟。
我们只需在文本编辑器中打开WorldTimeConverter.htm文件，并对其进行修改。在已经定义好的函数之前，添加如下所示的函数：
var daylightSavingAdjust = 0;
function window_onload()
{
updateTimeZone();
window.setInterval("updateTime()",1000);
}
function updateTimeZone()
{
并将<body>标记修改为如下所示的代码：
<body onload="return window_onload()">
保存该文件，并在浏览器中加载WorldTimeConverterFrameset.htm页面。你将看到一个与前面的例子中类似的页面，不同之处在于，页面上的时间每秒钟都被更新一次。
代码解说
实际上，我们仅对代码作了少量的修改。在window_onload()函数中，添加了一个新的计时器，该计时器每隔1000毫秒(即1s)调用一次updateTime()函数。该计时器将每隔1000毫秒触发一次，直到用户离开该页面为止。在前面的例子中，仅当用户选中了下拉列表框中一个不同的城市时，或者当单击了夏令时复选框时，才会调用updateTime()函数。
window_onload()函数被连接到了window对象的onload事件，因此一旦页面被加载后，计时器就将开始运行。
关于计时器和世界时转换器的例子，我们就介绍到这里。在下面的小节中，我们将应用上面所学到的知识，将“在线小测试”程序修改为一个具有时间限制的测试程序。