JavaScript进阶教程(第三课)

    在Javascript给事件定时很容易。其关键指令是setTimeout()和clearTimeout()方法。利用setTimeout(), 指令可以在未来的某个指定时间执行特定指令。如果你改变主意，你可以用clearTimeout()取消setTimeout的定时.

    下面是setTimeout的基本格式：

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

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

    该语句中有3项重要内容：

    setTimeout返回一个值。在该语句中the_timeout是一个变量，它指向特定的setTimeout。

    如果你想取消该setTimeout的定时，你只需引用该变量即可。你可以给变量起一个别的名称。

    在setTimeout中用到的第1个变量是一个JavaScript 语句的字符串。

    在本例中第1个参数是字符串："alertAndRedirect();"alertAndRedirect是为载入一个提示框而编写的一个函数，当用户点击“OK”时还重新回到本页面。

    注意在引号中的内容是一个完整的JavaScript语句，带有分号和其他必须的语法. 如果你执行该段代码则会调用函数lertAndRedirect。setTimeout只规定了该语句出现的时间。

    以下是函数alertAndRedirect()的代码：

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

    setTimeout的第2个参数指定了在多少毫秒之后执行第1个参数。一秒钟等于1000毫秒。所以如果你想让某事在3秒钟之后发生你必须将第2个参数设置为3,000毫秒。

    我们可以做下面的练习熟悉它的工作原理：

    其制作方法就是让按钮的onClick事件调用以下函数：

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

    它的意思是，“从现在开始，三秒钟后显示‘三秒'，六秒钟后显示‘六秒'，九秒钟后显示‘九秒'”，很好理解，对吧？

    但是，下面这样却不行：

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

    试一下这个错误的定时代码看看会发生什么？

    请注意当你等了三秒钟，三个定时信息之一神秘地出现在文本框里，然后就停在那儿。在上面的不好的代码中，每个setTimeout都连续地执行，（就是“从现在开始，三秒钟后显示‘三秒'，三秒钟后显示‘六秒'，三秒钟后显示‘九秒'”）。所以当三秒钟以后，三件事儿都发生了，你得到的正好是其中最后发生的结果----当然不是你希望的结果。

    一旦你理解了，setTimeout()还是相当容易使用的。但是一个难点儿的问题提出来了：你如何去做一个定时器，让某件事每隔2秒钟就发生一次，从现在一直到永远？象这个例子：

    先别担心停止定时器按钮，稍后我会讲clearTimeout。只要想想你怎么能够让定时器无限循环。实际上这是一个非常重要的问题而不仅仅是一个小练习。就象我前边提到的那样，当你用动态HTML让什么东西缓缓地在屏幕上移动时，就执行一个定时循环：“轻轻移动一点，等待，再移动一点，再等待.....如此这般”

    你想到这个问题了吗？

    好，答案并非那么简单。你无法象上面的那个例子那样，只用一个函数，就能够每隔两秒就改变文本框的内容，象这样：

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

    因为，好，你可以看出为什么不行：如果你想用这种方法让某件事无限循环下去，你必须有无限多行的代码。相比起其它问题，比如敲得你肩酸背痛来说，光是下载一个包含了无限多行javascript的页面就需要太长的时间，所以，这种方法根本就谈不上是一种选择。

    这个也不行，虽然它看起来更酷一些：

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

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

    请把程序研究一会，看看会得到什么结果。但不要尝试去运行它，否则结果会使你很不愉快。让我们在“while"循环中走几趟：

    第一遍
    while (hellIsHot == true) : 是的地狱还是热的。
    the_time += 2 : 所以现在  the_time = 2
    var time = setTimeout("changeTextBoxTo(2);", 2000) :
    所以, 从现在开始两秒后, 文本框变成了“2.",这正是我们想要的结果。

    第二遍
    while (hellIsHot == true) : 确实，地狱还是热的
    the_time += 2 : 所以现在 the_time = 4

    var time = setTimeout("changeTextBoxTo(4);", 4000) :
    所以, 从现在开始四秒后, 文本框变成了“4.",很好。

    第三遍
    while (hellIsHot == true) : 不, 地狱一点也没凉快.

    the_time += 2 : 所以现在 the_time = 6

    var time = setTimeout("changeTextBoxTo(6);", 6000) :
    所以, 从现在开始六秒后, 文本框变成了“6.",好。

    第四遍
    while (hellIsHot == true) : 是的，还是热的。

    还那样

    还那样

    你看明白了。这段代码看起来象是做对了。不幸的是其实不是这样。相反它创建了一个死循环，一直设定setTimeouts直到地狱冷下来。这里有两个问题。首先，当在循环里时，你的浏览器就无法做任何其它的事情，基本上就是停止，执行动作，再设定下一个定时器，一直到永远。第二，每次设定setTimeout时，浏览器 都要记住你预定执行的内容以及何时执行。最终你的浏览器会把内存耗尽，这时你的浏览器会崩溃，或者你的计算机会崩溃，或者把你弄疯而永远也不想再写一行Javascript程序了。

    一点都不好

    幸运的是，有一种方法能够写出成功的定时器循环。下一讲我们将要介绍这种方法

最新评论