超时调用和间隔调用

发表于

setTimeout() 和 setInterval() 都是 window 对象的方法。

超时调用（setTimeout）

顾名思义，setTimeout()通过设置超时值，以在指定的时间（超时值）过后的来执行某段代码。

setTimeout()接收两个参数：

  • 包含 JavaScript 代码的字符串（跟eval()解析的字符串一样） / 一个函数（可以是一个函数体，也可以是一个函数名）
  • 超时值（单位：毫秒）

方法会返回一个ID，作为计划执行代码的唯一标识符。可以通过 clearTimeout(ID)方法在指定时间过去之前来取消超时调用。

var timer = setTimeout(function(){
	console.log("hello");
}, 1000);
clearTimeout(timer);

其中，一般以函数作为第一个参数，使用字符串的话可能会导致性能损失，故不推荐传递字符串

注意：尽管设置了超时值，但是经过该时间后，也不一定会执行指定的代码段。因为 JavaScript 是一个单线程的解释器，一定时间内只能执行一段代码。为了控制要执行的代码，JS 有一个任务队列，这些任务会按照它们在队列中的顺序执行。setTimeout()方法只是延迟了将某个任务添加到队列的时间。因此，当任务队列为空，添加的代码便会立刻执行；否则，则需等队列前面的代码全部执行完了以后再执行。

间歇调用（setInterval）

setInterval()方法会根据设置的时间间隔来重复执行代码，直到间歇调用被取消或者是页面被卸载才停止。
接收的参数和 setTimeout()相同。
同样，也会返回一个 ID，可以通过 clearInterval(ID)来取消。

var num = 0;
function increaseNum(){
	num++;
	// 当 num 等于 10 时，取消后续的调用
	if(num === 10) {
		clearInterval(timer);
		alert("DONE~");
	}
};
var timer = setInterval(increaseNum, 1000);

一般来说，使用 setTimeout 来模拟 setInterval 是一种最佳模式。因为后一个间歇调用可能会在前一个间歇调用结束之前启动。而使用超时调用，则完全可以避免。如：

var num = 0;
function increaseNum(){
	num++;
	if(num < 10) {
		setTimeout(increaseNum, 1000);
	} else {
		alert("DONE~");
	}
}
setTimeout(increaseNum, 1000);
// 从中可看出，使用超时调用，没有必要跟踪其 ID，因为每次执行完代码，如果不再设置一次超时调用的话，调用就自动停止

(To be continued…)