实现javascript的延期执行或者重复执行的两个函数

以下内容摘录自《征服AJAX 如需引入外部Js需刷新才能执行]

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为：
window.setTimeout("hello()",1000);
读者可以体会它们的差别，在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的，例如：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

这样，如果要取消显示，只需单击页面任何一部分，就执行了window.clearTimeout方法，使得超时操作被取消。

2．window.setInterval方法
该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和clearTimeout方法类似，可以调用window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如：

复制代码代码如下:

//定义一个反复执行的调用   
var id=window.setInterval("somefunction",10000);   
//取消定时执行   
window.clearInterval(id);  

上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法，下面将设计一个秒表，来介绍setInterval函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
<form action="somepage.asp"> 
<input type="text" value="0" name="txt1"/> 
<input type="button" value="开始" name="btnStart"/> 
<input type="button" value="重置" name="btnReset"/> 
</form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取表单中的表单域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定义定时器的id 
var id; 
//每10毫秒该值增加1 
var seed=0; 
btnStart.onclick=function(){ 
      //根据按钮文本来判断当前操作 
      if(this.value=="开始"){ 
              //使按钮文本变为停止 
              this.value="停止"; 
              //使重置按钮不可用 
              btnReset.disabled=true; 
              //设置定时器，每0.01s跳一次 
              id=window.setInterval(tip,10); 
      }else{ 
              //使按钮文本变为开始 
              this.value="开始"; 
              //使重置按钮可用 
              btnReset.disabled=false; 
              //取消定时 
              window.clearInterval(id); 
      } 
}

//重置按钮 
btnReset.onclick=function(){ 
     seed=0; 
} 
//让秒表跳一格 
function tip(){ 
      seed++; 
      txt.value=seed/100; 
} 
//--> 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

«
»