JavaScript進階教程(第三課第二部分)第1/2頁

要使定時器迴圈工作你需要寫一個函數實現迴圈調用。這裡是一個例子：

var the_count = 0;
var the_timeout;
function doTimer()
{
window.document.timer_form.the_text.value = the_count;
the_count += 2;
the_timeout = setTimeout("doTimer();", 2000);
}

這裡用到的定時器就是上一頁所用的定時器。當使用者點擊按鈕時就調用該函數。該函數將the_count的當前值寫到文字框中。然後the_count增加2，則開始調用函數自身。文字框中的數值也相應更新，the_count在增加2， 則再次調用函數自身。在等待的這兩秒期間瀏覽器則可以執行其他的同步工作。the_count一增加2就執行另一次setTimeout()。你不用擔心會造成記憶體崩潰，因為在給定時間內只有一個setTimeout()在執行。

而無限的"while" 迴圈則會鎖定瀏覽器的工作，在執行該迴圈的過程中瀏覽器不能同時執行別的任何指令。而setTimeout則可以使迴圈的間隙中讓瀏覽器執行別的工作。

如何取消setTimeout？

現在你已經學習了如何設定一個無限迴圈。但是你必須懂得如何終止迴圈。其指令就是clearTimeout。上例中定時器還有下面這個表單元素：

<input type="button" value="stop timer" onClick="clearTimeout(the_timeout);">

點擊這個按鈕就可以終止定時器。指令是clearTimeout()，其實很簡單，如果你這樣設定setTimeout，the_timeout = setTimeout("some javascript",3000);

你可以這樣取消定時器：clearTimeout(the_timeout);

很簡單，對吧？下面我們看一個複雜迴圈定時器，一個可以報告時間的定時器。

現在時間是：

點擊“啟動時鐘”則時鐘開始運行。它從你的電腦中讀取時間並每半秒更新一次文字框中的顯示。這個例子通過一個自調用的函數設定了一個定時器。同時這個例子可以讓你瞭解一點Date對象的功能。當講解cookies時，我提到過Date對象。

以下是代碼：
function writeTime() {
// 獲得日期對象
var today = new Date();

// 從對象中獲得資訊
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();

// fixTime 使分和秒可以正常顯示
// 對於小於10的數字則在該數字前加一個0
minutes = fixTime(minutes);
seconds = fixTime(seconds);

//將時間字串組合在一起並寫出
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;

//每半秒鐘執行一次該函數
the_timeout= setTimeout('writeTime();',500);
}

function fixTime(the_time) {
if (the_time <10)
{
the_time = "0" + the_time;
}

return the_time;
}

我們仔細研究一下代碼。

var today = new Date();
正如new Array() 可以產生一個新的數組，你可以可以用new Date() 產生一個新的日期對象。產生對象之後，你可以對其提出你的問題。你產生的新的日期對象的括弧中間沒有任何參數， 但JavaScript會查詢電腦的始終並用其產生新的日期對象。現在我們的日期對象名為"today" ，我們可以從中提取相應的資訊。

var hours = today.getHours();
這條用於獲得當前的小時值。它是軍隊格式的時間，即，如果目前時間是下午兩點，則它返回的值是14。getHours()是Javascript的日期對象內建的方法調用。

var minutes = today.getMinutes(); var seconds = today.getSeconds();
這幾行原理和getHours()類似。

minutes = fixTime(minutes);
getMinutes存在一些問題，如果分鐘是11:01, getMinutes將返回 "1"。時鐘的顯示格式可不是這樣，它應該顯示為“01”。fixTime函數就是用於執行糾正顯示格式的功能。

下面兩行將字串組合在一起並顯示出來，
the_timeout = setTimeout('writeTime();', 500);

設定每半秒執行一次該函數的迴圈。

下一講我們將學習如何在定時器中加入變數。