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

    下面是setTimeout的基本格式：

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

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

    該語(yǔ)句中有3項(xiàng)重要內(nèi)容：

    setTimeout返回一個(gè)值。在該語(yǔ)句中the_timeout是一個(gè)變量，它指向特定的setTimeout。

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

    在setTimeout中用到的第1個(gè)變量是一個(gè)JavaScript 語(yǔ)句的字符串。

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

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

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

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

    setTimeout的第2個(gè)參數(shù)指定了在多少毫秒之后執(zhí)行第1個(gè)參數(shù)。一秒鐘等于1000毫秒。所以如果你想讓某事在3秒鐘之后發(fā)生你必須將第2個(gè)參數(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)在開(kāi)始，三秒鐘后顯示‘三秒'，六秒鐘后顯示‘六秒'，九秒鐘后顯示‘九秒'”，很好理解，對(duì)吧？

    但是，下面這樣卻不行：

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

    試一下這個(gè)錯(cuò)誤的定時(shí)代碼看看會(huì)發(fā)生什么？

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

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

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

    你想到這個(gè)問(wèn)題了嗎？

    好，答案并非那么簡(jiǎn)單。你無(wú)法象上面的那個(gè)例子那樣，只用一個(gè)函數(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);
        .
        .
        .
    }

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

    這個(gè)也不行，雖然它看起來(lái)更酷一些：

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

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

    請(qǐng)把程序研究一會(huì)，看看會(huì)得到什么結(jié)果。但不要嘗試去運(yùn)行它，否則結(jié)果會(huì)使你很不愉快。讓我們?cè)凇皐hile"循環(huán)中走幾趟：

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

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

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

    第三遍
    while (hellIsHot == true) : 不, 地獄一點(diǎn)也沒(méi)涼快.

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

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

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

    還那樣

    還那樣

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

    一點(diǎn)都不好

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

最新評(píng)論