JavaScript中超时函数setTimeout、setInterval的使用

前言

代码示例基于jQuery

setTimeout超时调用

setTimeout(执行的代码，时间单位毫秒)，返回值是一个超时调用ID，可以用该ID来取消超时调用
clearTimeout(ID)

由于JavaScript是单线程的，因此有一个任务队列，超时调用函数在度过了相应时间后，再将任务加入到任务队列中，不一定马上就被执行。
setTimeout代码示例，实现了延时五秒弹出“ok”的提示语：

$(document).ready(function(){
  setTimeout(function(){alert("ok");},5000);
});

setInterval间歇调用

setInterval(执行的代码，时间单位毫秒)，返回一个间歇调用ID，可以用该ID取消间歇调用

clearInterval(ID)

与超时调用很类似，不过它每隔相应时间就会将任务加入到任务队列中。通常我们很少使用间歇调用，因为可能会发生后一个间歇调用在前一个间歇调用结束前被调用，因此我们通常使用超时调用。
setInterval代码示例，实现了每隔3秒弹出提示语“ok”：

 $(document).ready(function(){
	var a = 0;
	var b = 3;
    closeId = setInterval(function(){
		a++;
		if (a<b){
			alert("ok");
		}else{
			clearInterval(closeId);
		}
	},3000);
 });

使用间歇调用时，最重要的是何时调用clearInterval(ID)，不然代码就会无限执行。

超时调用模拟间歇调用

可以用递归的方法，使用超时调用setTimeout模拟间歇调用。
代码示例如下

function test(a,b,delay){
	if (a<b){
		alert("ok");
		a++;
		setTimeout(function(){test(a,b,delay)},delay);
	}
}
$(document).ready(function(){
  setTimeout(function(){test(1,5,2000)},2000);
});

为了方便使用，给自己搞一个模板（主要函数无参数版）：

function delay(num,max,delayTime,Func){
    if (num < max){
		num++;
		Func();
        setTimeout(function(){delay(num,max,delayTime,Func)},delayTime);
	}
}

function test(){
	alert("ok");
	//需要间歇执行的代码
}

var delayTime = 1000;
$(function(){
	setTimeout(function(){delay(1,3,delayTime,test)},delayTime);
});

主要函数含参数：

function delay(num,max,delayTime,Func){
    if (num < max){
		num++;
		Func();
        setTimeout(function(){delay(num,max,delayTime,Func)},delayTime);
	}
}

function test(a){
	alert(a);
	//需要间歇执行的代码
}

var delayTime = 1000;
$(function(){
	setTimeout(function(){delay(1,3,delayTime,function(){test("ok");})},delayTime);
});