js中的SetTimeOut

1. SetTimeOut()

             1.1 SetTimeOut()语法例子

             1.2 用SetTimeOut()执行Function

             1.3 SetTimeOut()语法例子

             1.4 设定条件使SetTimeOut()停止

             1.5 计分及秒的counter

   2. ClearTimeout()

   3. Set Flag  

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

 

1. setTimeout( ) 语法例子
 

例子: 等候三秒才执行的 alert( )

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

1. 请用浏览器开启示范,以下内容:

<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 一起使用, 以下是一个较上个练习复杂的例子。

例子: 状态栏中自动消失的文字

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

1. 请用浏览器开启示范,以下内容:

<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( ) 以下设定:

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

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

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

例子: 自动每秒加 1 的 function

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

1. 请用浏览器开启示范,以下内容:

<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. 请你更改一些设定, 例如 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( ), 现在请你看一个较复习的例子。

例子: 计时的 counter

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

1. 请用浏览器开启示范,以下内容:

<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=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 = 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)
}
--------------------------------------------------------------------

1.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( ) 的操作。

例子: 可停止的 setTimeout( )

  作了两个改变: (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=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 四次, 就会一秒跳四次。(请看下一节)
--------------------------------------------------------------------

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

例子: 效果重复的 setTimeout( )

  只有一个定时器, 笔者想示范的是每按 [继续计时] 一次, 就会启动 count( ) 这
function 一次。

1. 请用浏览器开启示范,以下内容:

<html>
<head>
<script>
x=0
function count( )
{
 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), 就产生另一个作用。

例子: 只可开启一次的 function

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

1. 请用浏览器开启示范,以下内容:

<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。

 

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( )。

 

====================================================================

*****续集****

====================================================================

 

setTimeout(表达式,延迟时间); 单位:ms(毫秒);1s=1000ms; 

setInterval(表达式,交互时间); 
单位:ms(毫秒);1s=1000ms; 

window.setTimeout()

在执行时,它从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次;和window.clearTimeout一起使用.

window.setInterval()

在执行时,它从载入页面后每隔指定的时间执行一个表达式或者是函数;(功能类似于递归函数);和window.clearInterval一起使用.

1,基本用法:

执行一段代码:  var
i=0;

setTimeout("i+=1;alert(i)",1000);

执行一个函数:

var i=0;

setTimeout(function(){i+=1;alert(i);},1000);

//注意比较上面的两种方法的不同。

下面再来一个执行函数的:

  var i=0;
  function test(){
    i+=1;
    alert(i);
  }
  setTimeout("test()",1000);
  也可以这样:
  setTimeout(test,1000);

总结:

setTimeout的原型是这样的:

iTimerID =
window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有两种形式

setTimeout(code,interval)

setTimeout(func,interval,args)

其中code是一个字符串

func是一个函数.

注意"函数"的意义,是一个表达式,而不是一个语句.

比如你想周期性执行一个函数

 function
a(){//...}

可写为

setInterval("a()",1000)

setInterval(a,1000)

这里注意第二种形式中,是a,不要写成a(),切记!!!

展开来说,不管你这里写的是什么,如果是一个变量,一定是一个指向某函数的变量;如果是个函数,那它的返回值就 要是个函数

2,用setTimeout实现setInterval的功能

思路很简单,就是在一个函数中调用不停执行自己,有点像递归

var i=0;
  function xilou(){
    i+=1;
    if(i>10){alert(i);return;}
    setTimeout("xilou()",1000);
    //用这个也可以
    //setTimeout(xilou,1000);
  }

3,在类中使用setTimeout

终于到正题了,其实在类中使用大家遇到的问题都是关于this的,只要解决了这个this的问题就万事无忧了。

呵呵。让我们来分析一下:

function xilou(){
    this.name="xilou";
    this.sex="男";
    this.num=0;
  }
  xilou.prototype.count=function(){
    this.num+=1;
    alert(this.num);
    if(this.num>10){return;}
    //下面用四种方法测试,一个一个轮流测试。
    setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误:对象不支持此属性或方法。
    setTimeout("count()",1000);//B:错误显示:缺少对象
    setTimeout(count,1000);//C:错误显示:'count'未定义
    //下面是第四种 by 西楼冷月 www.chinacms.org
    var self=this;
    setTimeout(function(){self.count();},1000);//D:正确
  }
  var x=new xilou();
  x.count();

错误分析:

A:中的this其实指是window对象,并不是指当前实例对象

B:和C:中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()

D:将变量self指向当前实例对象,这样js解析引擎就不会混肴this指的是谁了。

话说回来,虽然我们知道setTimeout("this.count()",1000)中的this指的是window对象,但还是不明白为什么会是

window对象^_^(有点头晕...)

那我们可以想象一下这个setTimeout是怎样被定义的:

setTimeout是window的一个方法,全称是这样的:window.setTimeout()

那应该是这样被定义的:

window.setTimeout=function(vCode,
iMilliSeconds [, sLanguage]){
    //.....代码
    return timer//返回一个标记符
  }

所以当向setTimeout()传入this的时候,当然指的是它所属的当前对象window了

上一篇:翻译-QPKG开发工具快速开始指南


下一篇:runtime——消息机制