javascript setTimeout()超时调用与setInterval()间隔调用的例子

发布时间:2019-12-15编辑:脚本学堂
本文介绍下,javascript中setTimeout()与setInterval()的用法,setTimeout()用于超时调用,setInterval()用于间隔调用。有需要的朋友参考下。

javascript作为一门单线程语言,但它允许通过设置超时值和间隔时间来调度代码在特定的时刻执行。
setTimeout():在指定的事件过后执行代码;
setInterval()则是每隔指定的事件就执行一次代码。
超时调用需要使用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(),结果就跟什么也没发生一样。
超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下会指向windwo对象。在严格模式下是undefined。

间隔调用与超时调用类似,只不过它会按照指定的事件间隔重复执行代码,直至间隔调用被取消或者页面被卸载。
设置间隔调用的方法是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,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。
一般认为,使用超时调用来模拟间隔调用的是一种最佳的模式。

在开发环境下,很少使用真正的间隔调用,原因是后一个间隔调用可能会在前一个间隔调用结束之前启动。
而像前面实例中那样使用超时调用,则完全可以避免这一点。
因此,最好不要使用间隔调用。