setTimeout()间歇调用和 setInterval()超时调用
2012-03-07 15:59
429 查看
JavaScript是单线程语言,但它允许通过设置超时值和间歇时间来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法,他接受两个参数:要执行的代码和以毫秒表示的时间。其中,第一个参数可以是一个包含JavaScript代码的字符串,也可以是一个函数。例如,下面对stTimeout()的两次调用都会在一秒钟后显示一个警告框:
虽然这两种调用方式都没有问题,但由于传递字符串可能导致性能损失,因此不建议以字符串做为第一个参数。调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeOut()方法并将相应的超时调用ID作为参数传递给它,如下所示:
只要是在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。前面的代码在设置超时调用之后马上有调用了clearTimeout(),结果就跟什么也没发生一样。
间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码(字符串或者函数)和每次执行之前需要等待的毫秒数。下面来看一个例子:
调用setInterval()方法也会返回一个间歇调用ID,该ID可用于在将来在某个时刻取消间歇调用。要取消尚未执行的间歇调用,可以使用clerarInterval()方法并传入相应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。下面是一个常见的使用间歇调用的例子:
在这个例子中,变量num每半秒递增一次,当递增到最大值是就会取消先前设定的间歇调用。这个模式也可以使用超时调用来实现,如下所示:
可见,在使用超时调用时,没必要跟踪超时调用ID,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。一般认为,使用超时调用来模拟间歇调用的是一种最佳的模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面实例中那样使用超时调用,则完全可以避免这一点。所以最好不要使用间歇调用。
超时调用需要使用window对象的setTimeout()方法,他接受两个参数:要执行的代码和以毫秒表示的时间。其中,第一个参数可以是一个包含JavaScript代码的字符串,也可以是一个函数。例如,下面对stTimeout()的两次调用都会在一秒钟后显示一个警告框:
//不建议传递字符串! setTimeout("alert('Hello world!')", 1000); //推荐的调用方式 setTimeout(function () { alert("Hello world!"); }, 1000);
虽然这两种调用方式都没有问题,但由于传递字符串可能导致性能损失,因此不建议以字符串做为第一个参数。调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeOut()方法并将相应的超时调用ID作为参数传递给它,如下所示:
//设置超时调用 var timeoutId = setTimeout(function () { alert("Hello world!"); }, 1000); //注意:把它取消 clearTimeout(timeoutId);
只要是在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。前面的代码在设置超时调用之后马上有调用了clearTimeout(),结果就跟什么也没发生一样。
间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码(字符串或者函数)和每次执行之前需要等待的毫秒数。下面来看一个例子:
//不建议传递字符串! setInterval("alert('Hello world')", 10000); //推荐的调用方式 setInterval(function () { alert("Hello world!"); }, 1000);
调用setInterval()方法也会返回一个间歇调用ID,该ID可用于在将来在某个时刻取消间歇调用。要取消尚未执行的间歇调用,可以使用clerarInterval()方法并传入相应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。下面是一个常见的使用间歇调用的例子:
var num = 0; var max = 10; var intervalId = null; function incrementNumber() { num++; //如果执行次数达到了max设定的值,则取消后续尚未执行的调用 if (num == max) { clearInterval(intervalId); alert("完成"); } } intervalId = setInterval(incrementNumber, 500);
在这个例子中,变量num每半秒递增一次,当递增到最大值是就会取消先前设定的间歇调用。这个模式也可以使用超时调用来实现,如下所示:
var num = 0; var max = 10; function incrementNumber() { num++; //如果执行次数未达到max设定的值,则设置另一次超时调用 if (num < max) { setTimeout(incrementNumber, 500); } else { alert("完成"); } } setTimeout(incrementNumber, 500);
可见,在使用超时调用时,没必要跟踪超时调用ID,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。一般认为,使用超时调用来模拟间歇调用的是一种最佳的模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面实例中那样使用超时调用,则完全可以避免这一点。所以最好不要使用间歇调用。
相关文章推荐
- 【学习笔记】深入理解超时调用(setTimeout)和间歇调用(setInterval)
- js超时调用setTimeout和间歇调用setInterval实例分析
- JS中的间歇调用setInterval()与超时调用setTimeout()相关总结
- 超时调用(setTimeout)和间歇调用(setInterval)
- 间歇调用和超时调用(setTimeout和setInterval)
- JavaScript用setTimeout超时调用实现setInterval间歇调用
- 超时调用setTimeout 和 间歇调用setInterval
- 定时器之setTimeout()超时调用与setInterval()间歇调用
- js超时调用setTimeout和间歇调用setInterval实例分析
- setTimeout的妙用1——代替setInterval进行间歇调用
- setInterval和setTimeout调用方法小知识科普
- js-setTimeout(setInterval)和浏览器调用堆栈
- setTimeout()和setInterval() 何时被调用执行
- setTimeout()和setInterval() 何时被调用执行
- setTimeout()和setInterval() 何时被调用执行
- 函数内部用setTimeout()调用自身函数相当于setInterval()
- JS 中的间歇调用和超时调用的性能问题
- setTimeout()和setInterval() 何时被调用执行
- Js中setTimeout()和setInterval() 何时被调用执行的用法
- 浅谈JavaScript超时调用和间歇调用