JS定时器

站长苏飞 · 发表于 2012-9-27 13:05:03

定时器分两种分别是setTimeout和setInterval。
两者的用法分别是setTimeout(funhander,time);setInterval(fnhander,time);设置的相应计时器需要用clearTimeout(对象)和clearInterval（对象）清掉。有以下几点需要注意：
第一：setTimeout(funhander,time)的作用是在过time毫秒后，执行一次句柄funhander指向的方法。而setInterval（funhander,time）的作用是，每隔time毫秒后，就执行一次句柄funhander指向的方法。一直到我清掉计时器停止。
第二：巨大多数的计时器使用都是为了执行渐变、渐隐渐现、位置渐变等效果，所以funhander指向的方法会被多次执行。因此如果我们使用setTimeout做定时器，一般要把计时器的设置写在funhander指向的方法里，这样就可以循环调用，多次执行funhander，一直到我清掉这个定时器。而在使用setInterval设置定时器的时候，一般要放在funhander指向行数的外面。
第三：funhander指向的方法里处理了渐变中的一步，又会被重复执行，所以在此方法中大多包含有判断语句IF。用来控制渐变到一定程度的时候进行相应处理。比如清掉定时器或者进行循环操作。
第四：funhander为句柄，此处还可以为代码段，假设重复调用的函数为function test() {alert("1");}则，我们可以写为 var timer = setTimeout(test,1000)或者 var timer = setTimeout("test()",1000)或者 var timer = setTimeout("alert("1")",1000)。但是下面的写法是错误的。var timer = setTimeout(test(),1000)。
第五：因为funhander部分是句柄，所以不能传递参数，但是有些函数是必须要传递参数的，这时候我们一般用代码段。如果碰到又需要用句柄，又不能用代码段的特殊情况，我们一般用比较特殊的方法处理。如 var timer =setTimeout(test(name),1000)。这时候这个test（name）看起来是不对的，实际上如果他的返回值是一个没有传参的方法，利用子函数可以调用父函数变量的特点，把参数传递到返回函数（子函数）内部。那上面的写法一样是可以的。
第六：在设定时器的时候一定要有返回值timer（当然你可以起自己想要的名字）。清掉定时器的时候需要使用，也是一个好的习惯。下面是网上常见的一个例子，我稍微改动了下。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<form action="">
<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;
txt.value=seed/100;
}
//让秒表跳一格
function tip(){
      seed++;
      txt.value=seed/100;
}
//-->
</script>

		自动登录	找回密码
密码			马上注册

[JavaScript] JS定时器

相关帖子