本文对于初学者来说,非常不错,简洁易懂。而且更重要的解决了小码哥当初刚接触时的疑问——为啥setTimeout()本不算真正的定时器,却总是用作定时器。而setInterval()作为真正的定时器,却很少去用?呵呵,,这个答案,在本文最后一段,给了解释,当然,我认为有点道理,就是不知道答案完不完整!

不管咋样,希望也对大家有帮助啦!哈哈 

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

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


[javascript] view plaincopy

  1. //不建议传递字符串!  

  2. setTimeout("alert('Hello world!')", 1000);  

  3. //推荐的调用方式  

  4. setTimeout(function () {  

  5.     alert("Hello world!");  

  6. }, 1000);  


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


[javascript] view plaincopy

  1. //设置超时调用  

  2. var timeoutId = setTimeout(function () {  

  3.     alert("Hello world!");  

  4. }, 1000);  

  5. //注意:把它取消  

  6. clearTimeout(timeoutId);  


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

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


[javascript] view plaincopy

  1. //不建议传递字符串!  

  2. setInterval("alert('Hello world')", 10000);  

  3. //推荐的调用方式  

  4. setInterval(function () {  

  5.     alert("Hello world!");  

  6. }, 1000);  


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


[javascript] view plaincopy

  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 plaincopy

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


本文系转载,原文来自:http://blog.csdn.net/zyz511919766/article/details/7329242 。