Javascript中setTimeout()的用法详解

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这顶物件名称,这是用来设定ige时间,时间到了,就会执行一个指定的method。请先看以下一个简单,这是没有实际用途的例子,只是用来示范setTimeout()的语法。

1. setTimeout()语法例子

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

   在第三章 说到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,有以下语法:

Javascript中setTimeout()的用法详解

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

2.用 setTimeout()来执行 function

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

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

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

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

这是用来消除状态列的文字,浏览器执行clearword(),就会消除状态列的文字

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

onClick="window.status='hello',setTimeout('clearword()',3000)"

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

Javascript中setTimeout()的用法详解

这是设定第3秒(3000 milliseconds)浏览器就会执行clearword()这一个function.

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

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

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

自动每秒加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、网页开启后,请你留意文字框中的数值转变

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

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

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

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

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

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

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

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

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

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

5、计分及计秒的counter

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

练习 计时的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( )
{ 
1
  =
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

function countSec( )
{ 
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 1
  
60
  if (
z < 10) { z = "0" + z }
  document.
displaySec.displayBox.value=z
  setTimeout("
countSec( )", 1000)
}


10.2  clearTimeout()

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

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

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

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

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

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

练习   可停止的setTimeout()

作了两个改变,(1)有两个setTimeout(),(2)有两个按钮,分别可停止这两个setTimeout().

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=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一次,请看以下例子

练习   效果重复的setTimeout()

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

1. 请用浏览器开启示范磁碟中 flag1.htm, 這檔案有以下內容:

<html> <head>
<script>
x=0
function 
count( )
{ 
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来称呼这变数的原因,是因为这变数好比一支旗,将旗竖起,就会产生一个作用,见旗犯下就产生另一个作用。

练习   只可开放一次的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>

<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、这网页第四行有这一句: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().

上一篇:UE4高级运动系统学习笔记之八方向移动


下一篇:[UE4/5]蓝图制作手雷(上)d=====( ̄▽ ̄*)b手雷抛物线