JavaScript 的计时事件

Contents

使用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>

效果演示:

例子 – 无限循环

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

<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>

效果演示:


Leave a Reply

Your email address will not be published.