JavaScript 超时调用与循环调用函数:setTimeout()、setInterval()

 2016年04月02日    259     声明


window对象中有两个函数,分别用于超时调用(setTimeout())和循环调用(setInterval())指定的代码。JavaScript是单线程语言,这两个函数在单线程编程中非常有用,它们会在设置超时值与间歇值后在特定的时刻调用代码。


  1. 超时调用函数
  2. 定时调用函数

1. 超时调用函数

1.1 setTimeout()

var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);

setTimeout()会在指定时间之后调用指定的函数或代码,所调用的函数或代码只会执行一次。

setTimeout()第一个参数有两种形式,可以是一个函数,也可以是一个字符串。当是字符串是,其和在eval()中执行代码一样。

// 使用字符串
setTimeout("alert('itbilu.com')", 1000);

// 使用函数
setTimeout(function() {
  alert('itbilu.com');
}, 1000);

使用字符串时,会导致性能的降低,所以不建议使用字符串做为第一个参数。

第二个参数表示等待多长时间的毫秒数。JavaScript 是单线程执行的语言,setTimeout()会将指定代码添加到代码的执行队列中。第二个参数delay表示会在指定时间之后添加到执行队列中,如果指定时间之后队列中没有要执行的代码,被添加的代码会立即执行;如果队列中有代码,会在代码执行完毕后执行。

调用setTimeout()后,会返回一个数值类型的ID。通过该ID,可以使用clearTimeout()来取消未执行的超时任务。


1.2 clearTimeout()

window.clearTimeout(timeoutID)

clearTimeout()用于取消未执行的超时执行任务。timeoutID参数是通过setTimeout()返回的一个任务ID。

var itbilu = setTimeout(function() {
  alert('itbilu.com');
}, 1000);
clearTimeout(itbilu);


2. 定时调用函数

2.1 setInterval()

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

setInterval()会在按照指定时间间隔重复执行代码。

setInterval()第一个参数同样有两种形式,可以是一个函数,也可以是一个字符串。当是字符串是,其和在eval()中执行代码一样。出于执行效率的考虑,不建议使用字符串的形式。

setInterval("alert('itbilu.com')", 1000);
setInterval(function() {
  alert('itbilu.com');
}, 1000);

通过setInterval()定期执行的函数或代码,不一定会严格按照指定的时间间隔执行。如果代码执行队列中没有其它代码,会在指定间隔执行;如果有其它代码则会在指定代码执行完毕后执行。

要取消setInterval()创建的定时任务,需要根据其返回的任务ID,使用clearInterval()函数清除。


2.2 clearInterval()

window.clearInterval(intervalID)

clearInterval()用于清除已创建的循环执行函数。intervalID是由setInterval()创建的任务ID。

var intervalId = setInterval(function() {
  alert('itbilu.com');
}, 1000);
clearInterval(intervalId);