js内置对象---计时器对象
原创
js内置对象---计时器对象
一、计时器对象简介
二、一次性计时器
1. 一次性计时器的写法
2. 清除计时器
三、循环计时器
1. 一次性计时器的写法
2. 清除计时器
四、帧计时器
1. 设置兼容性
2. 移除计时器
五、把一次性计时器写成循环计时器
1. 写法
2. 移除计时器
六、三个计时器的区别
一、计时器对象简介
计时器对象分类
计时器对象分为一次性计时器，循环计时器，帧计时器（跟电脑的刷新频率有关）
二、一次性计时器
计时器的参数有string||function delay ms
ms—延迟多少毫秒后执行
1. 一次性计时器的写法
写法1
window.setTimeout(function(){
console.log("常规代码");
},1000) 写法2
//可以不写前缀window
setTimeout(function(){
console.log("常规代码");
},1000)写法3
//函数的提前声明
setTimeout(loop,2000);
function loop(){
console.log("执行");
}写法4
function loop(){
console.log("执行");
}//字符串形式
setTimeout("loop()",2000);2. 清除计时器
使用变量接收计时器对象
返回值是数值
var timer=setTimeout(function(){
console.log("执行");
},1000);
console.log(timer);//1
//清除计时器
clearTimeout(timer);三、循环计时器
和一次性计时器一致，只不过是循环执行。
1. 一次性计时器的写法
写法1
setInterval(function(){
console.log("执行");
},1000)写法2
setInterval(loop,1000);
function loop(){
console.log("执行");
}
setInterval("loop()",1000);2. 清除计时器
使用变量接收计时器对象
返回值是数值
var count=0;
var timer;
timer=setInterval(function(){
count++;
console.log(count);
if(count>9)
{
console.log(timer);//1
clearInterval(timer);
}
},1000)四、帧计时器
根据屏幕的刷新频率执行的计时器，不需要设置时间。
回调函数执行次数通常是每秒60次。
var count=0;
loop();
function loop(){
count++;
console.log(count);
window.requestAnimationFrame(loop);
}1. 设置兼容性
//设置兼容性
var requestFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame
||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame||function(callback){
setTimeout(callback,1000/60);
};
var count=0;
loop();
function loop(){
count++;
console.log(count);
requestFrame(loop);
}2. 移除计时器
//设置兼容性
var requestFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame
||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame||function(callback){
setTimeout(callback,1000/60);
};
var cancelFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame
||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||function(timer){
clearTimeout(timer);
};//移除计时器
var timer;
var count=0;
loop();
function loop(){
count++;
console.log(count);
if(count>19){
cancelFrame(loop);
return;
}
timer=requestFrame(loop);
}五、把一次性计时器写成循环计时器
1. 写法
var num=0;
loop();
function loop(){
num++;
console.log("输出", num);
setTimeout(loop,1000);
}2. 移除计时器
var num=0;
var timer;
loop();
function loop(){
num++;
console.log("输出", num);
if(num>9){
clearTimeout(timer);
return;
}
timer=setTimeout(loop,1000);
}六、三个计时器的区别
一次性计时器和循环计时器在浏览器窗口失去焦点的时候还会执行。
帧计时器在浏览器窗口失去焦点的时候会自动暂停。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
