1.1 SetTimeOut()语法例子

1.2 用SetTimeOut()执行Function

1.3 SetTimeOut()语法例子

1.4 设定条件使SetTimeOut()停止

1.5 计分及秒的counter

2. ClearTimeout()

3. Set Flag

10.1 setTimeout( )

  setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。

1. setTimeout( ) 语法例子

练习-69 等候三秒才执行的 alert( )

  在 第 3 章 说到 alert 对话盒, 一般是用按钮叫出来, 在这练习, 你会看到网页开启后 3 秒, 就会自动出现一个 alert 对话盒。

1. 请用浏览器开启示范磁碟中的timeout1.htm, 这档桉有以下内容:

<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue>
示范网页 </font> </h1> <p> </br>
<p>
请等三秒!

<script>
setTimeout("alert('
对不起, 要你久候')", 3000 )
</script>

</body> </html>

2. 留意网页开启后三秒, 就会出现一个 alert 对话盒。

  setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:

JS中setTimeout()的用法详解

  今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。

2. 用 setTimeout( ) 来执行 function

  setTimeout( ) 通常是与 function 一起使用, 以下是一个较上个练习複杂的例子。

练习-70 状态列中自动消失的文字

  在练习-20, 你看过如何用按钮在状态列显示文字, 然后再用按钮消除文字, 在这练习, 你看到如何用按钮在状态列显示文字, 而这文字会在三秒后自动消失。

1. 请用浏览器开启示范磁碟中的timeout2.htm, 这档桉有以下内容:

<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue>
示范网页 </font> </h1> <p> </br>

<script>
function
clearWord( )
{ window.status="" }
</script>

<form>
<input type="button" value="
在状态列显示文字"
  onClick="window.status='
Hello' ,setTimeout('clearWord()', 3000) ">
</form>
</body> </html>

2. 请在按钮上按一下,你应见到状态列出现 Hello 这字, 留意过了三秒, 这字就会消失。

1. 这处先设定一个名为 clearWord( ) 的 function, 作以下定义:

window.status=""

  这是用来消除状态列的文字 (请看练习-20 的说明), 浏览器执行 clearWord( ) , 就会消除状态列的文字。

2. 今次按钮设定了启动以下两项工作, 用 , 分隔, 浏览器会顺序执行这两项工作:

onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "

3. 今次的 setTimeout( ) 有以下设定:

JS中setTimeout()的用法详解

  这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个function。

  在第 2 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启后两秒, 就会自动关闭。

3. 不断重複执行的 setTimeout( )

  setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( ) 再启动自己一次, 就会使到第二个 setTimeout( ) 执行, 第二个又启动第三个, 这样循环下去, 这 setTimeout( ) 就会不断执行。

练习-71 自动每秒加 1 的 function

  在这练习, 你看到如何使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度, 例如每五秒就加 5, 或每五秒就加 1。

1. 请用浏览器开启示范磁碟中的 timeout3.htm, 这档桉有以下内容: