在Javascript給事件定時很容易。其關(guān)鍵指令是setTimeout()和clearTimeout()方法。利用setTimeout(), 指令可以在未來的某個指定時間執(zhí)行特定指令。如果你改變主意，你可以用clearTimeout()取消setTimeout的定時.

    下面是setTimeout的基本格式：

    var the_timeout = setTimeout("some javascript statement", some_number_of_milliseconds);

    在上面的例子中用到的指令如下：
    var the_timeout = setTimeout("alertAndRedirect ();",3000);

    該語句中有3項重要內(nèi)容：

    setTimeout返回一個值。在該語句中the_timeout是一個變量，它指向特定的setTimeout。

    如果你想取消該setTimeout的定時，你只需引用該變量即可。你可以給變量起一個別的名稱。

    在setTimeout中用到的第1個變量是一個JavaScript 語句的字符串。

    在本例中第1個參數(shù)是字符串："alertAndRedirect();"alertAndRedirect是為載入一個提示框而編寫的一個函數(shù)，當(dāng)用戶點擊“OK”時還重新回到本頁面。

    注意在引號中的內(nèi)容是一個完整的JavaScript語句，帶有分號和其他必須的語法. 如果你執(zhí)行該段代碼則會調(diào)用函數(shù)lertAndRedirect。setTimeout只規(guī)定了該語句出現(xiàn)的時間。

    以下是函數(shù)alertAndRedirect()的代碼：

    function alertAndRedirect()
    {
        alert('ok!  exhale!');
        window.location.replace("timing.htm");
    }

    setTimeout的第2個參數(shù)指定了在多少毫秒之后執(zhí)行第1個參數(shù)。一秒鐘等于1000毫秒。所以如果你想讓某事在3秒鐘之后發(fā)生你必須將第2個參數(shù)設(shè)置為3,000毫秒。

    我們可以做下面的練習(xí)熟悉它的工作原理：

    其制作方法就是讓按鈕的onClick事件調(diào)用以下函數(shù)：

    function ringBell()
    {
        var timer1 = setTimeout("window.document.the_form.the_text.value='3 seconds!';",3000);
        var timer2 = setTimeout("window.document.the_form.the_text.value='6 seconds!';",6000);
        var timer3 = setTimeout("window.document.the_form.the_text.value='9 seconds!';",9000);
    }

    它的意思是，“從現(xiàn)在開始，三秒鐘后顯示‘三秒'，六秒鐘后顯示‘六秒'，九秒鐘后顯示‘九秒'”，很好理解，對吧？

    但是，下面這樣卻不行：

    function doDumbTimer()
    {
        var timer1 = setTimeout("window.document.the_form_2.the_text_2.value='3 seconds!';",3000);
        var timer2 = setTimeout("window.document.the_form_2.the_text_2.value='6 seconds!';",3000);
        var timer3 = setTimeout("window.document.the_form_2.the_text_2.value='9 seconds!';",3000);
    }

    試一下這個錯誤的定時代碼看看會發(fā)生什么？

    請注意當(dāng)你等了三秒鐘，三個定時信息之一神秘地出現(xiàn)在文本框里，然后就停在那兒。在上面的不好的代碼中，每個setTimeout都連續(xù)地執(zhí)行，（就是“從現(xiàn)在開始，三秒鐘后顯示‘三秒'，三秒鐘后顯示‘六秒'，三秒鐘后顯示‘九秒'”）。所以當(dāng)三秒鐘以后，三件事兒都發(fā)生了，你得到的正好是其中最后發(fā)生的結(jié)果----當(dāng)然不是你希望的結(jié)果。

    一旦你理解了，setTimeout()還是相當(dāng)容易使用的。但是一個難點兒的問題提出來了：你如何去做一個定時器，讓某件事每隔2秒鐘就發(fā)生一次，從現(xiàn)在一直到永遠？象這個例子：

    先別擔(dān)心停止定時器按鈕，稍后我會講clearTimeout。只要想想你怎么能夠讓定時器無限循環(huán)。實際上這是一個非常重要的問題而不僅僅是一個小練習(xí)。就象我前邊提到的那樣，當(dāng)你用動態(tài)HTML讓什么東西緩緩地在屏幕上移動時，就執(zhí)行一個定時循環(huán)：“輕輕移動一點，等待，再移動一點，再等待.....如此這般”

    你想到這個問題了嗎？

    好，答案并非那么簡單。你無法象上面的那個例子那樣，只用一個函數(shù)，就能夠每隔兩秒就改變文本框的內(nèi)容，象這樣：

    function theTimer()
    {
        var timer1 = setTimeout("changeTextBoxTo(2);",2000);
        var timer2 = setTimeout("changeTextBoxTo(4);",4000);
        var timer3 = setTimeout("changeTextBoxTo(6);",6000);
        var timer4 = setTimeout("changeTextBoxTo(8);",8000);
        var timer5 = setTimeout("changeTextBoxTo(10);",10000);
        .
        .
        .
    }

    因為，好，你可以看出為什么不行：如果你想用這種方法讓某件事無限循環(huán)下去，你必須有無限多行的代碼。相比起其它問題，比如敲得你肩酸背痛來說，光是下載一個包含了無限多行javascript的頁面就需要太長的時間，所以，這種方法根本就談不上是一種選擇。

    這個也不行，雖然它看起來更酷一些：

    function theTimer()
    {
        the_time = 0;
        hellIsHot = true;

        while (hellIsHot == true)
        {
            the_time += 2;
            var timer = setTimeout("changeTextBoxTo(the_time);", the_time*1000);
        }
    }

    請把程序研究一會，看看會得到什么結(jié)果。但不要嘗試去運行它，否則結(jié)果會使你很不愉快。讓我們在“while"循環(huán)中走幾趟：

    第一遍
    while (hellIsHot == true) : 是的地獄還是熱的。
    the_time += 2 : 所以現(xiàn)在  the_time = 2
    var time = setTimeout("changeTextBoxTo(2);", 2000) :
    所以, 從現(xiàn)在開始兩秒后, 文本框變成了“2.",這正是我們想要的結(jié)果。

    第二遍
    while (hellIsHot == true) : 確實，地獄還是熱的
    the_time += 2 : 所以現(xiàn)在 the_time = 4

    var time = setTimeout("changeTextBoxTo(4);", 4000) :
    所以, 從現(xiàn)在開始四秒后, 文本框變成了“4.",很好。

    第三遍
    while (hellIsHot == true) : 不, 地獄一點也沒涼快.

    the_time += 2 : 所以現(xiàn)在 the_time = 6

    var time = setTimeout("changeTextBoxTo(6);", 6000) :
    所以, 從現(xiàn)在開始六秒后, 文本框變成了“6.",好。

    第四遍
    while (hellIsHot == true) : 是的，還是熱的。

    還那樣

    還那樣

    你看明白了。這段代碼看起來象是做對了。不幸的是其實不是這樣。相反它創(chuàng)建了一個死循環(huán)，一直設(shè)定setTimeouts直到地獄冷下來。這里有兩個問題。首先，當(dāng)在循環(huán)里時，你的瀏覽器就無法做任何其它的事情，基本上就是停止，執(zhí)行動作，再設(shè)定下一個定時器，一直到永遠。第二，每次設(shè)定setTimeout時，瀏覽器 都要記住你預(yù)定執(zhí)行的內(nèi)容以及何時執(zhí)行。最終你的瀏覽器會把內(nèi)存耗盡，這時你的瀏覽器會崩潰，或者你的計算機會崩潰，或者把你弄瘋而永遠也不想再寫一行Javascript程序了。

    一點都不好

    幸運的是，有一種方法能夠?qū)懗龀晒Φ亩〞r器循環(huán)。下一講我們將要介紹這種方法

最新評論