在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?？梢詫㈨撁嬷屑虞d的當前標語圖片的編號保存在全局變量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事件，因此一旦頁面被加載后，計時器就將開始運行。
關于計時器和世界時轉換器的例子，我們就介紹到這里。在下面的小節中，我們將應用上面所學到的知識，將“在線小測試”程序修改為一個具有時間限制的測試程序。
新聞熱點
疑難解答
