JavaScript 定时器详解：setTimeout 与 setInterval 的使用及最佳实践

超时调用 setTimeout 的使用方法

1. 超时调用 setTimeout()

setTimeout() 方法接收两个参数：第一个是待执行的函数，第二个是延迟时间（单位为毫秒），该方法会返回一个唯一的数值 ID。

 
setTimeout( function () {
alert("你好!");
},1000);

在调用之前，可以通过 clearTimeout() 来取消超时调用，该方法接收一个参数，即超时调用的 ID。

 
var timeOutId = setTimeout( function () {
alert("你好!");
},1000);
clearTimeout(timeOutId);

间歇调用 setInterval 的使用方法

2. 间歇调用 setInterval()

setInterval() 方法同样接收两个参数：第一个是待执行的函数，第二个是间隔时间（单位为毫秒），该方法也会返回一个唯一的数值 ID。

 
setInterval( function () {
alert("你好!");
},1000);

要取消间歇调用，可以使用 clearInterval()，该方法接收一个参数，即间歇调用的 ID。

 
var intervalId = null;
var span = document.createElement("span"); //创建span节点
span.Id="time"; //设置span的id
document.body.appendChild(span); //body内添加span
function incrementNumber () {
var now = new Date();
var timeStr = now.toLocaleTimeString();
span.innerText =timeStr;
num++;
if (num == 10) {
clearInterval(intervalId); //十秒后时间不变了
} 
} 
intervalId = setInterval(incrementNumber,1000);

使用超时调用替代间歇调用的最佳实践

3. 尽量用超时调用替代间歇调用

 
var num = 0;
var max = 10;
function incrementNumber() {
num++;
if (num<max) {
setTimeout(incrementNumber,1000);
} else {
alert("OK");
} 
} 
setTimeout(incrementNumber,1000);