前言
代码示例基于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);
});