JavaScript进阶教程(第三课)

时间:2020-05-12 人气:0

事件的定时以及浏览器的识别

随着我们所掌握的JavaScript日渐丰富，我们可以编制出越来越复杂的应用程序。上次的课程中我们学习了如何利用JavaScripts编写Cookies。今天我们将学习如何加入定时功能。给时间定时的能力在浏览器中非常有用，而在动态HTML应用中发挥更大的功用。

你可能会注意到动态HTML可以在页面中移动不同的内容。在JavaScript中将某个物体在屏幕中移动需要用到一个循环（loop），用循环的功能使物体随着时间推移移动。但是你如何告诉JavaScript将某个物体每秒钟或者每10分之一秒移动一点呢？

然而在不同的浏览器中将某物体进行移动的能力有很大的差别。要想在不同的浏览器中都可以应用动态HTML的东西，你需要做一些特别的处理。所以在讲解完事件定时之后我将讲解如何识别用户所使用的是何种浏览器（针对不同的浏览器你可以使用不同的程序代码）。

先学习事件的定时。点击下面的按钮，3秒钟后将弹出一个提示框。

在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程序了。

一点都不好

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

加载全部内容