要使定时器循环工作你需要写一个函数实现循环调用。这里是一个例子：

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

这里用到的定时器就是上一页所用的定时器。当用户点击按钮时就调用该函数。该函数将the_count的当前值写到文字框中。然后the_count增加2，则开始调用函数自身。文字框中的数值也相应更新，the_count在增加2， 则再次调用函数自身。在等待的这两秒期间浏览器则可以执行其他的同步工作。the_count一增加2就执行另一次setTimeout()。你不用担心会造成内存崩溃，因为在给定时间内只有一个setTimeout()在执行。

而无限的"while" 循环则会锁定浏览器的工作，在执行该循环的过程中浏览器不能同时执行别的任何指令。而setTimeout则可以使循环的间隙中让浏览器执行别的工作。

如何取消setTimeout？

现在你已经学习了如何设置一个无限循环。但是你必须懂得如何终止循环。其指令就是clearTimeout。上例中定时器还有下面这个表单元素：

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

点击这个按钮就可以终止定时器。指令是clearTimeout()，其实很简单，如果你这样设置setTimeout，the_timeout = setTimeout("some javascript",3000);

你可以这样取消定时器：clearTimeout(the_timeout);

很简单，对吧？下面我们看一个复杂循环定时器，一个可以报告时间的定时器。

现在时间是：

点击“启动时钟”则时钟开始运行。它从你的计算机中读取时间并每半秒更新一次文字框中的显示。这个例子通过一个自调用的函数设置了一个定时器。同时这个例子可以让你了解一点Date对象的功能。当讲解cookies时，我提到过Date对象。

以下是代码：
function writeTime() {
// 获得日期对象
var today = new Date();

// 从对象中获得信息
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();

// fixTime 使分和秒可以正常显示
// 对于小于10的数字则在该数字前加一个0
minutes = fixTime(minutes);
seconds = fixTime(seconds);

//将时间字符串组合在一起并写出
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;

//每半秒钟执行一次该函数
the_timeout= setTimeout('writeTime();',500);
}

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

return the_time;
}

我们仔细研究一下代码。

var today = new Date();
正如new Array() 可以生成一个新的数组，你可以可以用new Date() 生成一个新的日期对象。生成对象之后，你可以对其提出你的问题。你生成的新的日期对象的括号中间没有任何参数， 但JavaScript会查询计算机的始终并用其生成新的日期对象。现在我们的日期对象名为"today" ，我们可以从中提取相应的信息。
var hours = today.getHours();
这条用于获得当前的小时值。它是军队格式的时间，即，如果当前时间是下午两点，则它返回的值是14。getHours()是Javascript的日期对象内置的方法调用。

var minutes = today.getMinutes(); var seconds = today.getSeconds();
这几行原理和getHours()类似。

minutes = fixTime(minutes);
getMinutes存在一些问题，如果分钟是11:01, getMinutes将返回 "1"。时钟的显示格式可不是这样，它应该显示为“01”。fixTime函数就是用于执行纠正显示格式的功能。

下面两行将字符串组合在一起并显示出来，
the_timeout = setTimeout('writeTime();', 500);

设置每半秒执行一次该函数的循环。

下一讲我们将学习如何在定时器中加入变量。

定时器的功能主要在于设定某个未来的时间，让Javascript到时执行某个语句：

var the_string = "hello";
the_timeout = setTimeout("alert(the_string);", 60000);

这两行指令让JavaScript等待一分钟然后弹出一个提示框显示the_string变量所包含的内容。所以一分钟后JavaScript就寻找叫做the_string的变量并调用alert()。但是问题是一分钟后该变量中所包含的内容可能是别的什么。所以如果你把这两行代码放在一个函数内，setTimeout有可能会报错。例如在下例中：

function alertInAMinute()
{
var the_string = "hello";
the_timeout = setTimeout("alert(the_string);", 60000);
}

然后你在某个链接中调用这个函数：

<a href="#" onClick="alertInAMinute(); return false;">blah!</a>

可能会出错。因为你定义名为the_string的变量时用的是var，而当你在一个函数内使用var时，Javascript将其理解为该变量只存在于该函数中。一旦离开该函数而进入另一个函数后，该变量就会从Javascript的内存中消失。所以当后来需要调用该变量时，Javascript从它的内存中是不可能找到该变量的，错误因此就产生了。

产生问题的原因在于你将一个变量传递给setTimeout。你可以通过将变量的值而不是变量本身传递给setTime来避免这个问题：

function alertInAMinute()
{
var the_string = "hello";
the_timeout = setTimeout("alert('" + the_string + "');",60000);
}

这段代码将变量the_string从setTimeout的引号中拉出来，由于该变量变量目前不在setTimeout的引号内，JavaScript就可以从内存中找到该变量的值。

定时器在动态HTML中用途非常广泛，所以值得你仔细研究它。

评论 (0) All

登陆 还没注册？