要使定時(shí)器循環(huán)工作你需要寫一個(gè)函數(shù)實(shí)現(xiàn)循環(huán)調(diào)用。這里是一個(gè)例子：

    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);
    }

    這里用到的定時(shí)器就是上一頁所用的定時(shí)器。當(dāng)用戶點(diǎn)擊按鈕時(shí)就調(diào)用該函數(shù)。該函數(shù)將the_count的當(dāng)前值寫到文字框中。然后the_count增加2，則開始調(diào)用函數(shù)自身。文字框中的數(shù)值也相應(yīng)更新，the_count在增加2， 則再次調(diào)用函數(shù)自身。在等待的這兩秒期間瀏覽器則可以執(zhí)行其他的同步工作。the_count一增加2就執(zhí)行另一次setTimeout()。你不用擔(dān)心會造成內(nèi)存崩潰，因?yàn)樵诮o定時(shí)間內(nèi)只有一個(gè)setTimeout()在執(zhí)行。

    而無限的"while" 循環(huán)則會鎖定瀏覽器的工作，在執(zhí)行該循環(huán)的過程中瀏覽器不能同時(shí)執(zhí)行別的任何指令。而setTimeout則可以使循環(huán)的間隙中讓瀏覽器執(zhí)行別的工作。

    如何取消setTimeout？

    現(xiàn)在你已經(jīng)學(xué)習(xí)了如何設(shè)置一個(gè)無限循環(huán)。但是你必須懂得如何終止循環(huán)。其指令就是clearTimeout。上例中定時(shí)器還有下面這個(gè)表單元素：

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

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

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

    很簡單，對吧？下面我們看一個(gè)復(fù)雜循環(huán)定時(shí)器，一個(gè)可以報(bào)告時(shí)間的定時(shí)器。

    現(xiàn)在時(shí)間是：

    點(diǎn)擊“啟動時(shí)鐘”則時(shí)鐘開始運(yùn)行。它從你的計(jì)算機(jī)中讀取時(shí)間并每半秒更新一次文字框中的顯示。這個(gè)例子通過一個(gè)自調(diào)用的函數(shù)設(shè)置了一個(gè)定時(shí)器。同時(shí)這個(gè)例子可以讓你了解一點(diǎn)Date對象的功能。當(dāng)講解cookies時(shí)，我提到過Date對象。

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

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

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

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

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

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

        return the_time;
    }

    我們仔細(xì)研究一下代碼。

    var today = new Date();
    正如new Array() 可以生成一個(gè)新的數(shù)組，你可以可以用new Date() 生成一個(gè)新的日期對象。生成對象之后，你可以對其提出你的問題。你生成的新的日期對象的括號中間沒有任何參數(shù)， 但JavaScript會查詢計(jì)算機(jī)的始終并用其生成新的日期對象?，F(xiàn)在我們的日期對象名為"today" ，我們可以從中提取相應(yīng)的信息。

    var hours = today.getHours();
    這條用于獲得當(dāng)前的小時(shí)值。它是軍隊(duì)格式的時(shí)間，即，如果當(dāng)前時(shí)間是下午兩點(diǎn)，則它返回的值是14。getHours()是Javascript的日期對象內(nèi)置的方法調(diào)用。

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

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

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

    設(shè)置每半秒執(zhí)行一次該函數(shù)的循環(huán)。

    下一講我們將學(xué)習(xí)如何在定時(shí)器中加入變量。

最新評論