setTimeout()间歇调用和 setInterval()超时调用

         JavaScript是单线程语言，但它允许通过设置超时值和间歇时间来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

        超时调用需要使用window对象的setTimeout()方法，他接受两个参数：要执行的代码和以毫秒表示的时间。其中，第一个参数可以是一个包含javascript代码的字符串，也可以是一个函数。例如，下面对stTimeout()的两次调用都会在一秒钟后显示一个警告框：

[javascript] view plain copy

1. //不建议传递字符串！  
2. setTimeout("alert('Hello world!')", 1000);  
3. //推荐的调用方式  
4. setTimeout(function () {  
5.     alert("Hello world!");  
6. }, 1000);  

        虽然这两种调用方式都没有问题，但由于传递字符串可能导致性能损失，因此不建议以字符串做为第一个参数。调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeOut()方法并将相应的超时调用ID作为参数传递给它，如下所示：

[javascript] view plain copy

1. //设置超时调用  
2. var timeoutId = setTimeout(function () {  
3.     alert("Hello world!");  
4. }, 1000);  
5. //注意：把它取消  
6. clearTimeout(timeoutId);  

        只要是在指定的时间尚未过去之前调用clearTimeout()，就可以完全取消超时调用。前面的代码在设置超时调用之后马上有调用了clearTimeout()，结果就跟什么也没发生一样。

        间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码（字符串或者函数）和每次执行之前需要等待的毫秒数。下面来看一个例子：

[javascript] view plain copy

1. //不建议传递字符串！  
2. setInterval("alert('Hello world')", 10000);  
3. //推荐的调用方式  
4. setInterval(function () {  
5.     alert("Hello world!");  
6. }, 1000);  

        调用setInterval()方法也会返回一个间歇调用ID，该ID可用于在将来在某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用clerarInterval()方法并传入相应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。下面是一个常见的使用间歇调用的例子：

[javascript] view plain copy

1. var num = 0;  
2. var max = 10;  
3. var intervalId = null;  
4.   
5. function incrementNumber() {  
6.     num++;  
7.     //如果执行次数达到了max设定的值，则取消后续尚未执行的调用  
8.     if (num == max) {  
9.         clearInterval(intervalId);  
10.         alert("完成");  
11.     }  
12. }  
13. intervalId = setInterval(incrementNumber, 500);  

        在这个例子中，变量num每半秒递增一次，当递增到最大值是就会取消先前设定的间歇调用。这个模式也可以使用超时调用来实现，如下所示：

[javascript] view plain copy

1. var num = 0;  
2. var max = 10;  
3.   
4. function incrementNumber() {  
5.     num++;  
6.     //如果执行次数未达到max设定的值，则设置另一次超时调用  
7.     if (num < max) {  
8.         setTimeout(incrementNumber, 500);  
9.     } else {  
10.         alert("完成");  
11.     }  
12. }  
13. setTimeout(incrementNumber, 500);  

        可见，在使用超时调用时，没必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。一般认为，使用超时调用来模拟间歇调用的是一种最佳的模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面实例中那样使用超时调用，则完全可以避免这一点。所以最好不要使用间歇调用。