JS中setTimeout()的用法详解

setTimeout
clearTimeout
Set flag

1. SetTimeOut()

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,有以下语法:

　　今次例子是设定等 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>

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

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

window.status=""

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

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

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

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

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

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

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

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

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

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

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

<html> <head>
<script>
x = 0
function countSecond( )
{　x = x+1
　 document.fm.displayBox.value=x
　 setTimeout("countSecond()",1000)
}
</script> </head>
<body bgcolor=lightcyan text=red> <p> </br>

<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>

<script>
countSecond( )
</script>

</body> </html>

2.　网页开启后,请你留意文字框中的数值转变。

3.　请你将这档桉}u去硬碟,更改一些设定,例如 x = x+5,或将等候时间改为5000,看有什麽反应。

1.　这网页有两个 script,第一个是设定 countSecond( ) 这个 function,第二个在后的是在网页完全载入后,就启动这 function。

2.　留意今次以下的设定:

function countSecond( )
{　x = x+1
　 document.fm.displayBox.value = x
　 setTimeout("countSecond()",1000)
}

　　当 countSecond( ) 启动后,就会启动 setTimeout( ),这个 method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动 setTimeout( ),所以得出的结果是 countSecond( ) 每秒执行一次。

3.　在 JavaScript,我们是使用这处说的方法使到一些事项不断执行,其中一个用途是显示转动时间,另一个用途是设定跑动文字,随后的章节会有例子。

　　用上述的方法设定时间,setTimeout( ) 虽然设定了是一秒,但浏览器还有另外两项功能要执行,所以一个循环的时间是稍多于一秒,例如一分钟可能只有58 个循环。

4.　设定条件使 setTimeout( ) 停止

　　setTimeout( ) 的圈开始后,就会不断重},在上个练习,你看到文字框的数字不断跳动,但我们是有方法使到数字跳到某一个数值就停下来,其中一个方法是用 if...else 设定一个条件,若是 TRUE 就继续执行 setTimeout( ),若是 FALSE 就停止。

　　例如要使到上个练习的 counter 跳到 20 就停下,可将有关的 function 作以下的更改。

function countSecond( )
{　if ( x < 20 )
　　　{　x = x + 1
　　　　 document.displaySec.displayBox.value = x
　　　　 setTimeout("countSecond( )",1000)
　　}
}

5.　计分及计秒的 counter

　　在前面的练习,相信你已学识如何使用 setTimeout( ),现在请你看一个较}习的例子。

练习-72　计时的 counter

　　在这练习,你要设定两个文字框,一个显示分钟,另一个显示秒,网页开启后,就会在这两个文字框中自动计时。

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

<html> <head>
<script>
x=0
y=-1

function countMin( )
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin( )",60000)
}

function countSec( )
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()",1000)
}
</script> </head>

<body bgcolor=lightcyantext=red> <p> </br>

<table> <tr valign=top> <td> 你在本网页的连线时间是:</td>

<td> <form name=displayMin>
<input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 分 </td>

<td> <form name=displaySec></td>
<td> <input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 秒。</td> </tr> </table>

<script>
countMin( )
countSec( )
</script>
</body> </html>

2.　请你留意两个文字框中的数字转变。

1.　这网页有两个 function,一个用来计分钟,一个用来计秒。在这处,笔者只是示范setTimeout( ) 的操作,因为计时器有其他更精简的写法。(留意: 这方式的计时并不准确。)

2.　留意计秒的 function:

function countSec( )
{　x = x + 1
　 z = x% 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()",1000)

}

　　这处的 % 符号是 modulus (馀数),例如 z = x % 60 表示先进行 x / 60, 得出的馀数作为 z 这变数,例如 82 秒,modulus 就是 22,所以文字框会显示 22 而不是 82。

3.　若你要将单位数字在前加上 0,例如 01,02,03 等,可用以下方法:

function countSec( )
{　x = x + 1
　 z = x % 60
　 if (z < 10)　{　z = "0"+ z　}
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()",1000)
}

10.2　clearTimeout( )

　　在前一节,你看过如何使用 setTimeout( ) 来使到浏览器不断执行一个 function,当一个 setTimeout( ) 开始了循环的工作,我们要使它停下来,可使用 clearTimeout( ) 这 method。

　　clearTimout( ) 有以下语法:　clearTimeout(timeoutID)

　　要使用 clearTimeout( ),我们设定 setTimeout( ) 时,要给予这 setTimout( ) 一个名称,这名称就是 timeoutID,我们叫停时,就是用这 timeoutID来叫停,这是一个自订名称,但很多程式员就以 timeoutID 为名。

　　在下面的例子,笔者设定两个 timeoutID,分别命名为 meter1 及 meter2,如下:

timeoutID
　↓
meter1 =setTimeout("count1()",1000)
meter2 =setTimeout("count2()",1000)

　　使用这 meter1 及 meter2 这些 timeoutID 名称,在设定 clearTimeout( ) 时,就可指定对哪一个 setTimeout( ) 有效,不会扰及另一个 setTimeout( ) 的操作。

练习-73　可停止的 setTimeout( )

　　这练习以练习-71为蓝本,但作了两个改变: (1) 有两个 setTimeout( ),(2) 有两个按钮,分别可停止这两个 setTimout( )。

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

<html> <head>
<script>
x = 0
y = 0

function count1( )
{　x = x+ 1
　 document.display1.Box1.value= x
　 meter1=setTimeout("count1()",1000)
}

function count2( )
{　y = y+ 1
　 document.display2.Box2.value= y
　 meter2=setTimeout("count2()",1000)
}
</script> </head>

<body bgcolor=lightcyantext=red> <p> </br>

<form name=display1>
<input type="text" name="Box1"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter1)" >
<input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name=display2>
<input type="text" name="Box2"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter2) " >
<input type=button value="继续计时" onClick="count2( ) " >
</form>

<script>
count1( )
count2( )
</script>

</body> </html>

2.　留意网页中的两个文字框及内e变动的数字,每个文字框旁有两个按钮,请你试试两个按钮的反应。

3.　请你连续按多次 [继续计时]的按钮,留意数值的跳动加快了,原因是每按一次就启动 function 一次,每个 function 都令数值跳动,例如启动同一的 function 四次,就会一秒跳四次。(请看下一节)

10.3　Set flag

　　前个练习说到我们用一个按钮来启动一个 function,每按一下就会启动这 function 一次,请看以下例子。

练习-74　效果重}的 setTimeout( )

　　这练习实际是将 练习-73 简化,只有一个计时器,笔者想示范的是每按 [继续计时] 一次,就会启动 count( ) 这 function 一次。

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

<html> <head>
<script>
x=0
function count( )
{　x = x + 1
　 document.display.Box.value= x
　 timeoutID=setTimeout("count()",1000)
}
</script> </head> <body bgcolor=lightcyantext=red> <p> </br>
<form name=display>
<input type="text" name="Box"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(timeoutID) " >
<input type=button value="继续计时" onClick="count( ) " >
</form> <p>

<script>
count( )
</script>
</body> </html>

2.　网页开启后,你应见到文字框中的数字跳动,请你按四次 [继续计时],留意这会加快数字跳动,原因是有关的 function 被开启了多个,每个都会使数字转变。

3.　按了四次 [继续计时] 的按钮后,请你按 [停止计时] 的按钮,你会发现要按五次才能停止数字跳动。

　　在编写程式时,我们常要提防使用者作出一些特别动作,例如使用者按两次 [继续计时] 按钮,这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢? 这就不会产生重}效果。

　　笔者藉这处的例子 (随后还有多个例子),解说程式中一个 set flag (设定旗标) 的概念,flag 是一个记认,一般来说,这可以是 0 或是 1 (也可用 on 或 off,或任何两个自选的名称或数字),但也可以是 2、3、4 或更大的数字,在这例子有以下设定:

1.　程式开启时 flag=0。

2.　当 counter( ) 执行时会顺便将 flag 变为 1。

3.　在 [继续计时] 这按钮的反应中,会先检查 flag 是 0 或是 1,若是 0 就会产生作用,若是 1 就没有反应。

4.　使用这 flag 的方式,count( ) 这 function 开启后,[继续计时] 这按钮就没有作用。

　　这处的 flag 是一个变数,可任意取名,我们用 flag来称呼这变数的原因,是因为这变数好处一支旗,将旗竖起 (flag is on),就会产生一个作用,将旗放下 (flag is off),就产生另一个作用。

练习-75　只可开启一次的 function

　　这练习是将上个练习加多一个 flag,使到每次只能有一个 count( ) 这 function 在进行。

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

<html> <head>
<script>
x = 0
flag = 0
function count( )
{　x = x+ 1
　 document.display.Box.value= x
　 timeoutID=setTimeout("count()",1000)
　 flag = 1
}

function restart( )
{　if (flag==0)
　　　{　count( )　}
}
</script> </head>

<script>
count( )
</script>

2.　在网页中,你应见到三个按钮及文字框中的数字跳动。

3.　请你按 [Show flag]这按钮,应见到一个话对盒显示 flag 是 1。

4.　请你按 [停止计时]这按钮,数字停止跳动,请你按 [Show flag] 这按钮,应见到话对盒显示 flag 是 0。

5.　请你按多次 [继续计时]这按钮,你应见到数字不会加快,请你按 [Show flag]这按钮,应见到话对盒显示 flag 变回 1。

1.　这网页第 4 行有这一句: flag=0,这是设定 flag 这变数及将初始值定为 0,你也可将初始值定为 1,随后有关的 0 和 1 对调。

2.　count( ) 这 function 最后一句是 flag=1,所以启动 count( ) 后,flag 就会变为 1。

3.　[继续计时] 的按钮是用来启动 restart( ),这 function 有以下设定:

function restart( )
{　if (flag==0)
　　　{　count( )　}
}

　　这处的 if statement 检查 flag是否等于 0,若是 0 就启动 count(),若是 1 (即不是 0) 就没有反应,使用这方法,若 count( )已在执行中,[继续计时] 这按钮不会有作用。

　　这处的 flag=1设定,实际设为 1 或 2 或 3 等数值都是一样的,只要不是 0 就可以了,所以这两个相对的旗标,看似是 "0" 和 "1",实际是"0" 和 "non-zero" (非-0)。

4.　[停止计时] 的按钮有以下设定:

onClick="clearTimeout(timeoutID);flag=0"

　　这是停止 setTimeout( ) 的操作时,同时将 flag 转回 0,这使到restart( ) 这function 可以重新启动 count()。

JS中setTimeout()的用法详解

您可能感兴趣的文章:

猜你在找的Web前端相关文章