在javascript中，可以创建两种类型的计时器，即一次性计时器和间隔性触发计时器。一次性计时器仅在指定的延迟时间之后触发一次，而间隔性触发计时器每隔一定的时间间隔就触发一次。在下面的小节中，我们将详细讨论这两种计时器。
实际上，在javascript中可以根据需要设置多个计时器，并在代码中的任何地方启动计时器，例如在浏览器窗口的onload事件中启动计时器，或者在单击一个按钮时启动计时器。计时器常用在每隔一定间隔后翻转广告图片的情形，或者在web页面中显示一个实时更新的时钟。另外，使用dhtml所创建的各种动画，都需要使用计时器的settimeout()方法或者setinterval()方法—— 在本书的第12章和13章，我们将介绍dhtml的相关内容。
要设置一个一次性计时器非常简单：只需使用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版本以上的浏览器，还可以使用下面小节将要介绍的简单方法，以创建间隔性触发计时器。
在较新版本的浏览器中，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事件，因此一旦页面被加载后，计时器就将开始运行。
关于计时器和世界时转换器的例子，我们就介绍到这里。在下面的小节中，我们将应用上面所学到的知识，将“在线小测试”程序修改为一个具有时间限制的测试程序。
新闻热点
疑难解答
