setTimeout()的用法概述

kos — Mon, 16 Nov 2009 09:32:37 +0000

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



CODE
<html> <body> <h1> <font color=blue>示范网页</font></h1> <p>请等三秒</p> <script> setTimeout("alert('对不起，让你久等了')", 3000 ); </script> </body> </html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　　setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function。
　　　setTimeout(”alert(’对不起，让你久等了’)”, 3000 )中alert(’对不起，让你久等了！)就是指定要执行的method，3000就是要执行的等候时间。

2、用 setTimeout()来执行 function
setTimeout()通常是与function一起使用, 以下是一个较上一个例子复杂点的例子。



CODE
<html> <body> <h1><font color=blue>示范网页</font></h1> <script> function clearWord( ){ window.status=""; } </script> <form> <input type="button" value="在状态栏显示文字" onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "> </form> </body>  </html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

点击一下按钮, 你能看到状态栏出现Hello, 三秒后文字自动消失。
　　　A、在这里事先设定了一个clearWord()的方法, 定义如：window.status=”";即让状态栏的文字清空。
　　　B、点击按钮后会依次执行两项工作，用“，”隔开；onClick=”window.status=’Hello’ , setTimeout(’clearWord( )’, 3000) “。

3、不断重复执行setTimeout( )方法
setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( )再执行自己一次, 就会使到第二个setTimeout()执行, 第二个又启动第三个, 这样循环下去, setTimeout( ) 就会不断执行了。
下面的例子就是令文本框里面的数值每秒加1：



CODE
<html> <head><script>x = 0;function countSecond(){x = x+1;document.fm.displayBox.value=x;setTimeout("countSecond( )", 1000)}</script> </head><body> <p> </br><form name=fm><input type="text" name="displayBox" value="0" size=4 ></form><script>countSecond()</script></body> </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　　A、此例子中有两个script, 第一个是设定countSecond( ) 这个地, 第二个是在网页完全载入后再执行的function
　　　B、当countSecond()启动后, 就会启动setTimeout(), 这个method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。

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、clearTimeout( )
在上面已以看过如何使用setTimeout( )来使到浏览器不断执行一个function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这个method。
clearTimout( ) 有以下语法:　clearTimeout(timeoutID)
要使用 clearTimeout( ), 我们設定 setTimeout( ) 时, 要给予setTimout( ) 一个名称, 这个名称就是 timeoutID , 我们让它停止, 就是用timeoutID来叫停。
在下面的例子中, 设定两个timeoutID, 分別命名为meter1 及 meter2, 如下:
meter1 = setTimeout(”count1( )”, 1000)
meter2 = setTimeout(”count2( )”, 1000)
下面是一个可停止的setTimeout( )



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




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

6、给循环Set flag
先看这个例子



CODE
<html> <head> <script> x=0;function count(){ x = x + 1; document.display.box.value= x; timeoutID=setTimeout("count()", 1000); }</script> </head> <body> <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>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

在上面的例子中，网页打开后, 你会看见文本框中的数字递增效果, 请按四次 [继续计时]按钮, 留意现在会加快数字跳动, 原因是有关的 function 被开启了多个, 每个都会使数字改变。当连续按四次[继续计时]按钮后，再按[停止计时]按钮，你会发现要按五次后数字才会停下来。
再看下面一个改进的例子



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




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　网页开启后，点击[Show flag]按钮时，提示的flag是1，点击[停止计时]按钮后再点击[Show flag]按钮后，提示是flag是0，点击[继续计时]按钮后再点击[Show flag]按钮后，提示变回flag是1，通过这样的方法可以避免前面例子出现点击多次计时按钮会改变数值改变速度的情况发生。

setTimeout实现缓慢移动和clearTimeout停止移动效果

kos — Mon, 16 Nov 2009 03:01:08 +0000

　　前面一篇文章实现了用其它方式代替滚动条的方法，能够更容易的美化页面，而那种方法有一个缺陷就是给人视觉上的反应不是很一目了然，每点击按钮触发一次事件后，就直接从一个位置滚动到另一个位置，看不到整个滚动过程
其实前面一篇文章对于正常的使用完全没有问题了，但为了让其更完美决定把此功能完善了一下
先看看下面的效果



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>无标题文档</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/menuscrollbak.css"> </head>  <body onLoad="setmenu()">  <div class="mainDiv">  <div id="menutop"> </div> <div id="cov">  <div id="menu">  <p class="contenttitle">快乐不快乐(郑秀文)</p> 	 <p>咖啡淡了</p> 	  <p>是因为冰块溶了</p> <p>没怎么了</p> <p>淡了就是淡了</p> <p>搁在桌上还要不要</p> <p>不再爱了</p> <p>是因为感情坏了</p> <p>你怎么了</p> <p>坏了就是坏了</p> <p>没有什么大不了</p> <p>我们不快乐</p> <p>快乐后不再快乐</p> <p>就在最后的一秒</p> <p>抱了吻了哭了</p> <p>快乐不快乐</p> <p>没人快不快乐</p> <p>就在最后的一秒</p> <p> </p> <p>我们的关系就这样了</p> <p>咖啡淡了</p> <p>是因为冰块溶了</p> <p>没怎么了</p> <p>淡了就是淡了</p> <p>搁在桌上还要不要</p> <p>不再爱了</p> <p>是因为感情坏了</p> <p>你怎么了</p> <p>坏了就是坏了</p> <p>没有什么大不了</p> <p>我们不快乐</p> <p>快乐后不再快乐</p> <p>就在最后的一秒</p> <p>抱了吻了哭了</p> <p>快乐不快乐</p> <p>没人快不快乐</p> <p>就在最后的一秒</p> <p> </p> <p>我们的关系就这样了</p> <p> </p> 	 </div>  </div>  <div id="menubottom"></div> </div>  </body> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/menuscrollbak.js"></script>  </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　js下载：menuscrollbak.js
　　css下载点击menuscrollbak.css

散人笔记 » clearTimeout

setTimeout()的用法概述

setTimeout实现缓慢移动和clearTimeout停止移动效果