JS中setTimeout()的用法详解
来源:互联网 发布:mac虚拟机打开u盘 编辑:程序博客网 时间:2024/04/28 11:26
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>
<script>
functionclearWord( )
{ 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( )有以下设定:
这是设定等 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
functioncountSecond( )
{ 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. 请你将这档案复制去硬盘,更改一些设定,例如 x = x+5,或将等候时间改为5000,看有什么反应。
1. 这网页有两个 script, 第一个是设定countSecond( )这个 function,第二个在后的是在网页完全加载后,就启动这 function。
2. 留意今次以下的设定:
functioncountSecond( )
{ 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作以下的更改。
functioncountSecond( )
{ 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
functioncountMin( )
{ y=y+1
document.displayMin.displayBox.value=y
setTimeout("countMin( )",60000)
}
functioncountSec( )
{ x=x + 1
z =x % 60
document.displaySec.displayBox.value=z
setTimeout("countSec( )",1000)
}
</script> </head>
<body bgcolor=lightcyan text=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:
functioncountSec( )
{ 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等,可用以下方法:
functioncountSec( )
{ 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
functioncount1( )
{ x = x + 1
document.display1.box1.value =x
meter1=setTimeout("count1( )",1000)
}
functioncount2( )
{ y = y + 1
document.display2.box2.value =y
meter2=setTimeout("count2( )",1000)
}
</script> </head>
<body bgcolor=lightcyan text=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. 留意网页中的两个文字框及内里变动的数字,每个文字框旁有两个按钮,请你试试两个按钮的反应。
3. 请你连续按多次 [继续计时]的按钮,留意数值的跳动加快了,原因是每按一次就启动 function一次,每个 function都令数值跳动,例如启动同一的 function四次,就会一秒跳四次。(请看下一节)
10.3 Set flag
前个练习说到我们用一个按钮来启动一个 function,每单击就会启动这 function一次,请看以下例子。
练习-74 效果重复的 setTimeout( )
这练习实际是将练习-73简化,只有一个定时器,笔者想示范的是每按 [继续计时]一次,就会启动count( )这 function一次。
1. 请用浏览器开启示范磁盘中的flag1.htm,这档案有以下内容:
<html> <head>
<script>
x=0
functioncount( )
{ x=x + 1
document.display.box.value=x
timeoutID=setTimeout("count( )",1000)
}
</script> </head> <body bgcolor=lightcyan text=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
functioncount( )
{ x = x + 1
document.display.box.value =x
timeoutID=setTimeout("count( )",1000)
flag = 1
}
functionrestart( )
{ if (flag==0)
{ count( ) }
}
</script> </head>
<body bgcolor=lightcyan text=red> <p> </br>
<form name=display>
<input type="text" name="box" value="0" size=4 >
<input type=button value="停止计时"
onClick="clearTimeout(timeoutID);flag=0 " >
<input type=button value="继续计时" onClick="restart( ) " >
</form> <p>
<script>
count( )
</script>
<form>
<input type=button value="Show flag"
onClick="alert('The flag now is '+flag) " >
</form>
</body> </html>
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有以下设定:
functionrestart( )
{ 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( )。
转自:http://blog.csdn.net/zhengzhichen/article/details/3079943
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- JS中setTimeout()的用法详解
- 织梦dedecms 数据库类,二次开发
- 复制ASM files到文件系统。
- JAVA_EE和JDK7.1,Windows、Linux、Mac
- speech codec (G.711, G.723, G.726, G.729, iLBC)
- Linq to sql 中如何进行 left join
- JS中setTimeout()的用法详解
- mysql 源码安装的一点说明
- js 常用代码
- kissme病毒原理描述及python清除脚本
- 如何解决esri_sde, Connection to RDBMS failed.
- TimeZone的使用
- 推送方式的基础知识
- Collection 简介
- sys用户可以用任何密码登陆的问题