使用window.setInterval()方法可以以指定的间隔实现循环调用函数,直到使用window.clearInterval()方法取消循环。
使用window.setTimeout()方法可以在指定的间隔时间后调用函数,且仅仅是一次调用,而不会循环,在间隔时间段内可以使用 window.clearTimeout()方法取消调用。(由于window对象是其他大部分对象的共同祖先,在这里window对象可以省略不写,)
(1)使用setInterval()和clearInterval()方法实现间隔调用
setInterval()方法可以指定的间隔(以毫秒为单位)运行函数,如果需要停止,可以调用clearInterval()方法取消。这两个方法一般都是配合使用的,语法格式如下:
var time=setInterval(func,delay);
clearInterval(time);
参数说明:
参数func是要执行的函数的名称。该参数不要包括引号或圆括号,并且不要指定要掉用的函数的参数,仅仅是函数名。例如下面的实例是每5秒就调用一次函数someFunction:
setInterval(someFunction,5000);
而不是:
setInterval("someFunction",5000);
但是可以这样使用(引号或圆括号都包含):
setInterval("someFunction()",5000);
(2)使用setTimeout()和clearTimeout()方法实现延迟调用
setTimeout()和clearTimeout()方法配合使用可以完成延迟调用,他们是指在指定的延迟(以毫秒为单位)后运行指定的函数,而不会重复执行。其语法格式如下:
var time=setInterval(func,delay);
clearInterval(time);
易犯的错误
在使用setInterval()方法进行间隔调用时,如果要调用的函数执行的时间超过间隔期就会导致不可预知的错误,例如下面的代码设置每100毫秒就 执行函数someFunction一次,但是someFunction操作需要200毫秒才能完成,这样可能导致异常(可能会有两个 someFunction函数在同时运行):
function someFunction(){
//200毫秒才能完成这个函数的功能
}
setInterval(someFunction,100);
要解决这个问题,可以使用setTimeout()方法来代替,在延迟执行函数后,再次指定一个延迟执行操作,从而完成与setInterval()方法相同的功能,但是不会导致前面的错误。例如:
function someFunction(){
//200毫秒才能完成这个函数的功能
//执行完后,再次延迟100毫秒继续执行这个函数
setTimeout(someFunction,100);
}
setTimeout(someFunction,100);