2020-3-20 14:17:57 | 作者:老铁SEO | 0个评论 | 人浏览
定时器一般有两个
1)setTimeout();//n毫秒后执行一次
2)setInterval();//每隔n秒执行一次
这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收
清除定时器方法:
setTimeout()对应的是clearTimeout(id);
setInterval()对应的是clearInterval(id);
js定时器用法
问题:当一个页面同时有两个setInterval函数调用的冲突如何解决?
解决方法:
定义两个变量并把setInterval赋值给变量
vara=setInterval(function(){------code------},1000)
varb=setInterval(function(){------code------},1000)
清除
clearInterval(a)
clearInterval(b)
举例:
注:
setInterval()方法会不停地调用函数,直到用clearInterval()终止定时或窗口被关闭。
window.clearInterval()
功能:取消由setInterval()方法设置的定时器。
js定时器settimeout
setTimeout是延迟执行,只执行一次,不是定时器
多次间断执行要用setInterval
vartimer=setInterval(function(){},1000);
取消用clearInterval(timer);
都是等待执行完毕后执行的,可以尝试跑这段代码:
setInterval(function(){
alert('每次同时只会出现一个');
},3000);<
>
setTimeout这个函数是在延时后执行1次。而setInterval是一直延时、执行重复。
js定时器重复执行
/**
*创建有上限时钟
*@param{int}upperlimit上限次数
*@param{int}cycle间隔时间
*@param{Function}_callback回调函数
*@param{Function}_completeCallback执行完毕后调用的函数
*@return{Object}返回一个时钟对象
*/
functioncreateUpperLimitTime(_upperlimit,cycle,_callback,_completeCallback){
varsuccessindex=0;
vartimeobj;
varupperlimit=_upperlimit;
varcallback=_callback||function(){};
varcompleteCallback=_completeCallback||function(){};
//先看到了没再执行
console.log("定时器开始");
console.log(upperlimit);
varextendCallback=function(){
if(successindex>=upperlimit){
clearTimeout(timeobj);
completeCallback();//完成后对时钟实例基本无需什么操作了,因此这里不提供也行
}else{
callback(timeobj);//实际上这个回调函数是可以获得时钟实例的
successindex++;
}
}
timeobj=window.setInterval(extendCallback,cycle);
returntimeobj;//返回这个时钟对象,可以作用于终止
}
createUpperLimitTime(5,1000,function(){//测试
console.log(1);
},function(){
console.log(2);
});<
>
js定时器函数
都是等待执行完毕后执行的,可以尝试跑这段代码:
setInterval(function(){
alert('每次同时只会出现一个');
},3000);<
>
setTimeout这个函数是在延时后执行1次。而setInterval是一直延时、执行重复。
定时器第二个参数设置的就是间隔时间,将1000毫秒设为0就可以立即执行