实例分析setTimeout和setInterval的区别

发布于: July 22, 2009, 12:30 pm 分类: HTML/CSS/JavaScript 作者: Saturn

理解编程中某个对象、方法和属性的最好方法，莫过于通过不同实例对其进行验证。

在JavaScript中，setTimeout和setInterval是window对象的两个不同方法；我们通常利用这两个方法来重复执行某个代码段或者function，以实现网页上的一些“动态”效果。

有意思的是，它们的用法几乎完全一样，都是：

setTimeOut(expression, timespan)

setInterval(expression, timespan)

第一个参数expression是需要调用的function；第二个参数timespan是指定延迟（等待）多少秒才调用参数一中的表达式，单位是微秒milliseconds。

既然这两个方法都是延迟一段时间后执行某个表达式，那么，它们的功能不就一样了吗？用我们的膝盖想想都应该知道，如果这两个方法的功能完全一样， ECMAScript开发组何不将他们合并成一个方法？

显然，它们的内部执行原理是不同的，到底有什么不同，下面我们通过一个实例网页时钟（看演示）效果来说明：

<html>
<head>
<script type="text/javascript">
<!-- 
function clock()
{
var now = new Date();//获取当前日期和时间
var h = now.getHours();//获取小时
var m = now.getMinutes();//获取分
var s = now.getSeconds();//获取秒
//如果时、分、秒只有一位，则补零
h = check(h);
m = check(m);
s  = check(s);
var dShow = document.getElementById("show");
dShow[removed] = "Saturn's Clock: "+h+":"+m+":"+s;//输出
setTimeOut("clock()",1000);//递归调用
}
 
//补零函数
function check(s)
{
 if (s<10)
 {
  s = "0"+s;
 }
 return s;
}
//-->
</script>
</head>
<body onload="clock()">
<br />
<div id="show"></div>
</body>
</html>

可以看到上面这个时钟效果，我们利用setTimeOut方法来递归调用clock函数，时间间隔是1000ms,也就是1秒。

再来看看setInterval如何实现相同的效果，仔细观察，你会发现其中的不同：

<html>
<head>
<script type="text/javascript">
<!--
setInterval("clock()",1000);
 
function clock()
{
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
h = check(h);
m = check(m);
s  = check(s);
var dShow = document.getElementById("show");
dShow[removed] = "Saturn's Clock: "+h+":"+m+":"+s;
}
 
//补零
function check(s)
{
 if (s<10)
 {
  s = "0"+s;
 }
 return s;
}
//-->
</script>
</head>
<body onload="clock()">
<br />
<div id="show"></div>
</body>
</html>

在这里，我们利用setInterval方法来循环调用clock()函数，时间间隔也是1000ms。

仔细对比以上两段代码，我们发现了其中的不同：在第一段代码中，setTimeOut是作为clock()方法的一部分编码在函数内部；而第二段代码中，setInterval作为单独的一行代码编码在函数外部。为什么要这么做？

这就引出了setTimeOut和setInterval的具体区别：

setTimeOut

1. setTimeOut本身仅执行一次。要验证这一点，你只需要将第一段代码中的setTimeOut移到function外部。此时你会发现，秒位上的数字只跳动了一下就停止了。这也就是为什么我们将它放置到函数内部递归调用的原因。

2. 需要特别指出的是，如果我们通过递归的方式来实现setTimeOut中表达式的多次调用，它实际的执行时间间隔（或者说执行延迟）应该等于设置的时间延迟timespan，加上执行整个函数所需的时间。从这一点上来说，setTimeOut不是一个精确的计时器。

setInterval

setInterval就比较好理解了，那就是根据指定时间，循环执行指定的表达式函数；需要注意的是，无论在这个时间间隔内，表达式是否执行完毕，当下个时间点到来时，都将重新执行这个表达式。可见，setInterval是一个精确的计时/计数器，因为它的执行延迟就是你指定的时间片。

理解这两个方法的区别，我们就可以在实际项目中准确的使用它们。如果你的时间间隔可能会因为程序业务逻辑而发生改变，这个时候最好用setTimeOut（为什么?这个问题留个阅读本文的各位）；而如果你仅仅是需要一个精准的计时器，最好选用setInterval。但是对一般的应用来说，二者可通用，最终所实现的功能是一样的。

相关日志:

标签: javascript

回应此文

你也可以选择引用此文章.