JavaScript定时器循环与实时时钟实现详解

JavaScript定时器循环与实时时钟实现详解

要实现定时器的循环工作，需要编写一个函数来执行循环调用。以下是一个示例代码：

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

如何取消setTimeout？

既然已经掌握了如何设置无限循环，接下来需要了解如何终止它。使用的指令是clearTimeout。在上例中，定时器还包含以下表单元素：

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

点击该按钮即可终止定时器。该指令为clearTimeout()，用法十分简单。如果之前这样设置定时器：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);

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

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