[list=1]
[*][url=http://www.1sucai.cn/article/35535.htm#t0]setTimeout [/url]
[list=1]
[url=http://www.1sucai.cn/article/35535.htm#t1]setTimeout 语法例子[/url]
[/*][*][url=http://www.1sucai.cn/article/35535.htm#t2]用 setTimeout 来执行 function[/url]
[/*][*][url=http://www.1sucai.cn/article/35535.htm#t3]不断重复执行的 setTimeout [/url]
[/*][*][url=http://www.1sucai.cn/article/35535.htm#t4]设定条件使 setTimeout 停止[/url]
[/*][*][url=http://www.1sucai.cn/article/35535.htm#t5]计分及计秒的 counter[/url][/*][/list]
[*][url=http://www.1sucai.cn/article/35535.htm#t6]clearTimeout [/url]
[/*][*][url=http://www.1sucai.cn/article/35535.htm#t7]Set flag[/url] [/*][/list]
[b]1. SetTimeOut()[/b]
1.1 SetTimeOut()语法例子
1.2 用SetTimeOut()执行Function
1.3 SetTimeOut()语法例子
1.4 设定条件使SetTimeOut()停止
1.5 计分及秒的counter
[b]2. ClearTimeout()[/b]
[b]3. Set Flag
[/b]
[url=http://www.takka.com.hk/jstutor/ch10/timeout1.htm]timeout1.htm[/url], 这档桉有以下内容:
[b]<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> [/b]示范网页[b] </font> </h1> <p> </br>
<p> [/b]请等三秒![b]
<script>
setTimeout("alert('[/b]对不起, 要你久候[b]')", [/b]3000[b] )
</script>
</body> </html>[/b]
2. 留意网页开启后三秒, 就会出现一个 alert 对话盒。
[b]setTimeout( )[/b]是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100153_0_41095.gif[/img]
今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行[b]alert( )[/b] 这一个method。
[url=http://www.takka.com.hk/jstutor/ch10/timeout2.htm]timeout2.htm[/url], 这档桉有以下内容:
[b]<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> [/b]示范网页[b] </font> </h1> <p> </br>[/b]
[b]<script>
function [/b][i][b]clearWord[/b][/i][b]( )
{ window.status="" }
</script>
<form>
<input type="button" value="[/b]在状态列显示文字[b]"
onClick="window.status='[/b]Hello[b]' ,setTimeout('[/b][i][b]clearWord[/b][/i][b]()', [/b]3000[b]) ">
</form>
</body> </html>[/b]
2. [i][u]请在按钮上按一下[/u][/i],你应见到状态列出现 Hello 这字, 留意过了三秒, 这字就会消失。
1. 这处先设定一个名为[b]clearWord( ) [/b]的 function, 作以下定义:
[b]window.status=""[/b]
这是用来消除状态列的文字 (请看[i][b]练习-20[/b][/i] 的说明), 浏览器执行 [i][b]clearWord[/b][/i][b]( )[/b] , 就会消除状态列的文字。
2. 今次按钮设定了启动以下两项工作, 用 ， 分隔, 浏览器会顺序执行这两项工作:
[b]onClick="window.status='[/b]Hello[b]' , setTimeout('[/b][i][b]clearWord[/b][/i][b]( )', [/b][i][b]3000[/b][/i][b]) "[/b]
3. 今次的[b]setTimeout( ) [/b]有以下设定:
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100153_1_98520.gif[/img]
这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 [i][b]clearWord[/b][/i][b]( ) [/b]这一个function。
在第 2 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启后两秒, 就会自动关闭。
[url=http://www.takka.com.hk/jstutor/ch10/timeout3.htm]timeout3.htm[/url], 这档桉有以下内容:
[b]<html> <head>
<script>
x = [/b]0[b]
function [/b][i][b]countSecond[/b][/i][b]( )
{ x = x+1
document.[i]fm[/i].[/b][i][b]displayBox[/b][/i][b].value=[/b][i][b]x[/b][/i][b]
setTimeout("[/b][i][b]countSecond[/b][/i][b]()", [/b]1000[b])
}
</script> </head>
<body bgcolor=lightcyan text=red> <p> </br>
<form name=[/b][i][b]fm[/b][/i][b]>
<input type="text" name="[/b][i][b]displayBox[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
</form>
<script>
[i]countSecond[/i]( )
</script>
</body> </html>[/b]
2. 网页开启后, 请你留意文字框中的数值转变。
3. [i][u]请你将这档桉複製去硬碟, 更改一些设定, 例如 x = x+5, 或将等候时间改为5000, 看有什麽反应[/u][/i]。
1. 这网页有两个 script, 第一个是设定[b] [/b][i][b]countSecond[/b][/i][b]( )[/b] 这个 function, 第二个在后的是在网页完全载入后, 就启动这 function。
2. 留意今次以下的设定:
[b]function [/b][i][b]countSecond[/b][/i][b]( )
{ [/b][i][b]x[/b][/i][b] = [/b][i][b]x[/b][/i][b]+1
document.[/b][i][b]fm[/b][/i][b].[/b][i][b]displayBox[/b][/i][b].value = x
setTimeout("[/b][i][b]countSecond[/b][/i][b]()", [/b][i][b]1000[/b][/i][b])
}[/b]
当 [i][b]countSecond[/b][/i][b]( )[/b] 启动后, 就会启动[b]setTimeout( )[/b], 这个 method 在一秒后又启动 [i][b]countSecond[/b][/i][b]( )[/b],[b] countSecond( ) [/b]启动后又启动[b] setTimeout( )[/b] , 所以得出的结果是[b]countSecond( ) [/b]每秒执行一次。
3. 在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行, 其中一个用途是显示转动时间, 另一个用途是设定跑动文字, 随后的章节会有例子。
用上述的方法设定时间,[b]setTimeout( )[/b] 虽然设定了是一秒, 但浏览器还有另外两项功能要执行, 所以一个循环的时间是稍多于一秒, 例如一分钟可能只有58 个循环。
[url=http://www.takka.com.hk/jstutor/ch10/timeout4.htm]timeout4.htm[/url], 这档桉有以下内容:
<html> <head>
<script>
[i]x[/i]=0
[i]y[/i]=-1
function [i]countMin[/i]( )
{ [i]y[/i]=[i]y[/i]+1
document.[i]displayMin[/i].[i]displayBox[/i].value=[i]y[/i]
setTimeout("[i]countMin[/i]( )",60000)
}
[b]function [/b][i][b]countSec[/b][/i][b]( )
{ [/b][i][b]x [/b][/i][b]= [/b][i][b]x [/b][/i][b]+ [/b]1[b]
[i]z [/i]=[/b][i][b]x [/b][/i][b]% [/b]60[b]
document.[/b][i][b]displaySec[/b][/i][b].[/b][i][b]displayBox[/b][/i][b].value=[/b][i][b]z[/b][/i][b]
setTimeout("[/b][i][b]countSec[/b][/i][b]()", [/b]1000[b])
}
</script> </head>[/b]
[b]<body bgcolor=lightcyantext=red> <p> </br>
<table> <tr valign=top> <td> [/b]你在本网页的连线时间是:[b]</td>
<td> <form name=[/b][i][b]displayMin[/b][/i][b]>
<input type="text" name="[/b][i][b]displayBox[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
</form> </td>
<td> 分 </td>
<td> <form name=[/b][i][b]displaySec[/b][/i][b]></td>
<td> <input type="text" name="[/b][i][b]displayBox[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
</form> </td>
<td>[/b] 秒。[b]</td> </tr> </table>[/b]
[b]<script>
[/b][i][b]countMin[/b][/i][b]( )
[/b][i][b]countSec[/b][/i][b]( )
</script>
</body> </html>[/b]
2. 请你留意两个文字框中的数字转变。
1. 这网页有两个 function, 一个用来计分钟, 一个用来计秒。在这处, 笔者只是示范[b]setTimeout( ) [/b]的操作, 因为计时器有其他更精简的写法。[b](留意: 这方式的计时并不准确。)[/b]
2. 留意计秒的 function:
[b]function [/b][i][b]countSec[/b][/i][b]( )
{ [/b][i][b]x[/b][/i][b] = [/b][i][b]x [/b][/i][b]+ [/b]1[b]
[i]z[/i][/b][b] = [/b][i][b]x[/b][/i][b]% [/b]60[b]
document.[/b][i][b]displaySec[/b][/i][b].[/b][i][b]displayBox[/b][/i][b].value=[/b][i][b]z[/b][/i][b]
setTimeout("[/b][i][b]countSec[/b][/i][b]()", [/b]1000[b]) [/b]
[b]}[/b]
这处的[b]%[/b] 符号是 modulus (馀数), 例如[i] [/i][i][b]z [/b][/i][b]= [/b][i][b]x [/b][/i][b]% [/b]60 表示先进行 [i][b]x [/b][/i][b]/ [/b]60[b],[/b] 得出的馀数作为[i][b] z[/b][/i] 这变数, 例如 82 秒, modulus 就是 22, 所以文字框会显示 22 而不是 82。
3. 若你要将单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:
[b]function [/b][i][b]countSec[/b][/i][b]( )
{ [/b][i][b]x[/b][/i][b][i] [/i]= [/b][i][b]x [/b][/i][b]+ [/b]1[b]
[i]z [/i]= [/b][i][b]x [/b][/i][b]% [/b]60[b]
if ([/b][i][b]z[/b][/i][b] < [/b]10[b]) { [/b][i][b]z[/b][/i][b] = "[/b]0[b]"+ [/b][i][b]z [/b][/i][b]}
document.[/b][i][b]displaySec[/b][/i][b].[/b][i][b]displayBox[/b][/i][b].value=[/b][i][b]z[/b][/i][b]
setTimeout("[/b][i][b]countSec[/b][/i][b]()", [/b]1000[b])
}[/b]
[url=http://www.takka.com.hk/jstutor/ch10/clear.htm]clear.htm[/url], 这档桉有以下内容:
[b]<html> <head>
<script>
[/b][i][b]x[/b][/i][b] = [/b]0
[i]y[/i] =[b]0[/b]
[b]function [/b][i][b]count1[/b][/i][b]( )
{ [/b][i][b]x[/b][/i][b] = [/b][i][b]x[/b][/i][b]+ [/b]1[b]
document.[/b][i][b]display1[/b][/i][b].[/b][i][b]box1[/b][/i][b].value= [/b][i][b]x[/b][/i][b]
[i]meter1[/i][/b][b]=setTimeout("[/b][i][b]count1[/b][/i][b]()", [/b]1000[b])
}[/b]
[b]function [/b][i][b]count2[/b][/i][b]( )
{ [/b][i][b]y[/b][/i][b] = [/b][i][b]y[/b][/i][b]+ [/b]1[b]
document.[/b][i][b]display2[/b][/i][b].[/b][i][b]box2[/b][/i][b].value= [/b][i][b]y[/b][/i][b]
[i]meter2[/i][/b][b]=setTimeout("[/b][i][b]count2[/b][/i][b]()", [/b]1000[b])
}
</script> </head>
[/b]
[b]<body bgcolor=lightcyantext=red> <p> </br>
<form name=[/b][i][b]display1[/b][/i][b]>
<input type="text" name="[/b][i][b]box1[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
<input type=button value="[/b]停止计时[b]" onClick="clearTimeout([/b][i][b]meter1[/b][/i][b])" >
<input type=button value="[/b]继续计时[b]" onClick="[/b][i][b]count1[/b][/i][b]() " >
</form>
<p>
<form name=[/b][i][b]display2[/b][/i][b]>
<input type="text" name="[/b][i][b]box2[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
<input type=button value="[/b]停止计时[b]" onClick="clearTimeout([/b][i][b]meter2[/b][/i][b]) " >
<input type=button value="[/b]继续计时[b]" onClick="[/b][i][b]count2[/b][/i][b]( ) " >
</form>
<script>
[/b][i][b]count1[/b][/i][b]( )
[/b][i][b]count2[/b][/i][b]( )
</script>
</body> </html>[/b]
2. 留意网页中的两个文字框及内裡变动的数字, 每个文字框旁有两个按钮, [i][u]请你试试两个按钮的反应[/u][/i]。
3. [i][u]请你连续按多次 [继续计时]的按钮[/u][/i], 留意数值的跳动加快了, 原因是每按一次就启动 function 一次, 每个 function 都令数值跳动, 例如启动同一的 function 四次, 就会一秒跳四次。(请看下一节)
[url=http://www.takka.com.hk/jstutor/ch10/flag1.htm]flag1.htm[/url], 这档桉有以下内容:
[b]<html> <head>
<script>
[/b][i][b]x[/b][/i][b]=[/b]0[b]
function [/b][i][b]count[/b][/i][b]( )
{ [/b][i][b]x [/b][/i][b]= [/b][i][b]x [/b][/i][b]+ [/b]1[b]
document.[/b][i][b]display[/b][/i][b].[/b][i][b]box[/b][/i][b].value= [i]x[/i]
[i]timeoutID[/i][/b][b]=setTimeout("[/b][i][b]count[/b][/i][b]()", [/b]1000[b])
}
</script> </head> <body bgcolor=lightcyantext=red> <p> </br>
<form name=[/b][i][b]display[/b][/i][b]>
<input type="text" name="[/b][i][b]box[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
<input type=button value="[/b]停止计时[b]" onClick="clearTimeout([/b][i][b]timeoutID[/b][/i][b]) " >
<input type=button value="[/b]继续计时[b]" onClick="[/b][i][b]count[/b][/i][b]( ) " >
</form> <p>[/b]
[b]<script>
[/b][i][b]count[/b][/i][b]( )
</script>
</body> </html>[/b]
2. 网页开启后, 你应见到文字框中的数字跳动, [i][u]请你按四次 [继续计时][/u][/i], 留意这会加快数字跳动, 原因是有关的 function 被开启了多个, 每个都会使数字转变。
3. 按了四次 [继续计时] 的按钮后, [i][u]请你按 [停止计时] 的按钮[/u][/i], 你会发现要按五次才能停止数字跳动。
在编写程式时, 我们常要提防使用者作出一些特别动作, 例如使用者按两次 [继续计时] 按钮, 这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢? 这就不会产生重複效果。
笔者藉这处的例子 (随后还有多个例子), 解说程式中一个 set flag (设定旗标) 的概念, flag 是一个记认, 一般来说, 这可以是 0 或是 1 (也可用 on 或 off, 或任何两个自选的名称或数字), 但也可以是 2、3、4 或更大的数字, 在这例子有以下设定:
1. 程式开启时[b] [/b][i][b]flag[/b][/i][b]=[/b]0。
2. 当[b]counter( ) [/b]执行时会顺便将[b]flag[/b] 变为 1。
3. 在 [继续计时] 这按钮的反应中, 会先检查 [i][b]flag[/b][/i] 是 0 或是 1, 若是 0 就会产生作用, 若是 1 就没有反应。
4. 使用这 flag 的方式, [i][b]count[/b][/i][b]( )[/b] 这 function 开启后, [继续计时] 这按钮就没有作用。
这处的 flag 是一个变数, 可任意取名, 我们用 flag来称呼这变数的原因, 是因为这变数好处一支旗, 将旗竖起 (flag is on), 就会产生一个作用, 将旗放下 (flag is off), 就产生另一个作用。
[b]练习-75 只可开启一次的 function[/b]
这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。
1. [i][u]请用浏览器开启示范磁碟中的[/u][/i][url=http://www.takka.com.hk/jstutor/ch10/flag2.htm]flag2.htm[/url], 这档桉有以下内容:
[b]<html> <head>
<script>
[/b][i][b]x[/b][/i][b] = [/b]0[b]
[/b][i][b]flag[/b][/i][b] = [/b]0[b]
function [/b][i][b]count[/b][/i][b]( )
{ [/b][i][b]x[/b][/i][b] = [/b][i][b]x[/b][/i][b]+ [/b]1[b]
document.[/b][i][b]display[/b][/i][b].[/b][i][b]box[/b][/i][b].value= [/b][i][b]x[/b][/i][b]
[i]timeoutID[/i][/b][b]=setTimeout("[/b][i][b]count[/b][/i][b]()", [/b]1000[b])
[i]flag[/i][/b][b] = [/b]1[b]
}[/b]
[b]function [/b][i][b]restart[/b][/i][b]( )
{ if ([/b][i][b]flag[/b][/i][b]==[/b]0[b])
{ [/b][i][b]count[/b][/i][b]( ) }
}
</script> </head>[/b]
[b]<body bgcolor=lightcyantext=red> <p> </br>
<form name=[/b][i][b]display[/b][/i][b]>
<input type="text" name="[/b][i][b]box[/b][/i][b]"value="[/b]0[b]" size=[/b]4[b] >
<input type=button value="[/b]停止计时[b]"
onClick="clearTimeout([/b][i][b]timeoutID[/b][/i][b]);[/b][i][b]flag[/b][/i][b]=[/b]0[b]" >
<input type=button value="[/b]继续计时[b]" onClick="[/b][i][b]restart[/b][/i][b]() " >
</form> <p>[/b]
[b]<script>
[/b][i][b]count[/b][/i][b]( )
</script>[/b]
[b]<form>
<input type=button value="[/b]Show flag[b]"
onClick="alert('[/b]The flag now is '[b]+ [/b][i][b]flag[/b][/i][b])" >
</form>
</body> </html>[/b]
2. 在网页中, 你应见到三个按钮及文字框中的数字跳动。
3. [i][u]请你按 [Show flag]这按钮[/u][/i], 应见到一个话对盒显示 flag 是 1。
4. [i][u]请你按 [停止计时]这按钮, 数字停止跳动, 请你按 [Show flag] 这按钮[/u][/i], 应见到话对盒显示 flag 是 0。
5. [i][u]请你按多次 [继续计时]这按钮, 你应见到数字不会加快, 请你按 [Show flag]这按钮[/u][/i], 应见到话对盒显示 flag 变回 1。
1. 这网页第 4 行有这一句: [i][b]flag[/b][/i][b]=[/b]0 , 这是设定 [i][b]flag[/b][/i] 这变数及将初始值定为 0, 你也可将初始值定为 1, 随后有关的 0 和 1 对调。
2. [i][b]count[/b][/i][b]( )[/b] 这 function 最后一句是[b] [/b][i][b]flag[/b][/i][b]=[/b]1 , 所以启动 [i][b]count[/b][/i][b]( )[/b] 后, [i][b]flag[/b][/i] 就会变为 1。
3. [继续计时] 的按钮是用来启动 [i][b]restart[/b][/i][b]( )[/b], 这 function 有以下设定:
[b]function [i]restart[/i]( )
{ if ([/b][i][b]flag[/b][/i][b]==[/b]0[b])
{ [/b][i][b]count[/b][/i][b]( ) }
}[/b]
这处的 if statement 检查 [i][b]flag[/b][/i]是否等于 0, 若是 0 就启动 [i][b]count[/b][/i][b]()[/b], 若是 1 (即不是 0) 就没有反应,使用这方法, 若 [i][b]count[/b][/i][b]( )[/b]已在执行中, [继续计时] 这按钮不会有作用。
这处的 [i][b]flag[/b][/i][b]=[/b]1设定, 实际设为 1 或 2 或 3 等数值都是一样的,只要不是 0 就可以了, 所以这两个相对的旗标,看似是 "0" 和 "1", 实际是"0" 和 "non-zero" (非-0)。
4. [停止计时] 的按钮有以下设定:
[b]onClick="clearTimeout([/b][i][b]timeoutID[/b][/i][b]);[/b][i][b]flag[/b][/i][b]=[/b]0[b]"[/b]
这是停止[b]setTimeout( )[/b] 的操作时,同时将 [i][b]flag[/b][/i] 转回 0, 这使到[b][/b][i][b]restart[/b][/i][b]( ) [/b]这function 可以重新启动[b] [/b][i][b]count[/b][/i][b]()[/b]。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
