计时器按照时间反复执行;
setTimeout一次性计时器 延迟多长时间去执行 ,相对应关闭计时器的方法是:clearTimeout()
setinterval循环计时器 ,相对应关闭计时器的方法是: clearInterval()
以上两个计时器时间可以设置,缺点:在网页缩小或者切换选项卡之后计时器继续执行
如何将setTimeout改造为循环计时器
showtime();
function showtime(){
console.log(1);
t=setTimeout("showtime()",1000);
}
window.requestAnimationFrame()其实这是为了做动画专用的一个方法,这个方法会告诉浏览器,我要执行的这个步骤是一个动画,优点是可以在网页缩小或者和切换选项卡之后计时器暂停;缺点是:时间没办法设置,时间是按照电脑屏幕刷新时间,大概1000/60=16ms
但是我们可以将它们的优缺点结合,
第一种:将window.requestAnimationFrame()与setTimeout结合,构造一个既可以设置时间又可以在网页缩小或者切换选项卡时计时器暂停
loop();
function loop(){
console.log(1);
setTimeout(function (){
window.requestAnimationFrame(loop);
},1000);
}
第二种:只使用window.requestAnimationFrame(),利用Date对象设置一定时间
var time=new Date().getTime();
loop();
function loop(){
var times=new Date().getTime();
//根据日期的时间计算1000ms
if(times-time>=1000)
{
time=times;
console.log(1);
}
times=null;
window.requestAnimationFrame(loop);
}