JavaScript 的计时事件

使用JavaScript可以实现代码的延时执行，也就是说当一个函数被调用时不立即执行某些代码，而是等一段指定的时间后再执行，这就叫做计时事件。

——————————————————————————————

JavaScript的计时事件很容易使用，两个关键的函数是：

setTimeout() – 在指定时间后执行代码
clearTimeout() – 取消 setTimeout()

注意: setTimeout() 和 clearTimeout() 都是HTML DOM 的 Window 对象的函数。

setTimeout()

语法

var t=setTimeout("javascript statement",milliseconds)

函数 setTimeout() 返回一个值 – 在上面这个语句中，返回值被存储在了变量t中，作为指向这个setTimeout()的指针，以备要取消这个 setTimeout()或引用它时使用。

函数setTimeout()的第一个参数是一个字符串，存储的是一个JavaScript语句，这个语句可以只是一个命令，比如 “alert(‘5 seconds!’)” ，也可以使调用某个函数，例如 “alertMsg()”.第二个参数指定了从现在开始等多少毫秒再执行这个语句。

注意: 1000毫秒 = 1秒。

例子

下面例子中，当按钮被点击后3秒会显示一个提示窗口。

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('3 seconds!')",3000)
}
</script>
</head>

<body>
<form>
<input type="button" value="显示一个延迟的提示窗!"
onClick="timedMsg()">
</form>
</body>
</html>

效果演示：

例子 – 无限循环

要在一个无限循环中使用计时器，我们需要写一个递归调用的函数（一个会调用自己的函数）。在下面的例子中，当按钮被点击后，输入框会从０开始计数，并永远计下去：

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计数!"
onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>

</html>

效果演示：

clearTimeout()

语法

clearTimeout(setTimeout_variable)

例子

下面的例子同样使用上面“无限循环”这个例子，不同是我们现在增加了一个停止计数的按钮：

<html>
<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计数!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计数!"
onClick="stopCount()">
</form>
</body>

</html>

效果演示：