JS-定时器

HTML5新增的定时器 requestAnimationFrame

大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。
　setTimeout和setInterval 内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行

循环 setInterval(js funcition，milliseconds)

间隔指定的毫秒数不停地执行指定的代码

var timer = null;
var count=0;
myTime();//实现多循环计时效果
function myTime(){		
		if(++count>10){
			clearTimeout(timer);//清除计时器
			return;//跳出函数myTime()
		}
		timer = setTimeout(myTime(),1000/60);//递归
}

一次 setTimeout(js funcition，milliseconds)

暂停指定的毫秒数后执行指定的代码

var timer=null;
myTime();//执行一次计时
function myTime(){
	timer=setInterval(function(){
		f():
		clearInterval(timer);
	},1000/60)
}

var timer=null;
var count=0;
mytime();//执行5次循环
function mytime(){	
	if(++count>5){
		clearInterval(timer);
		return;
	}
	f();
	timer=setInterval(mytime(),1000/60)
}

var Timer = setTimeout(function(){
    console.log(Timer);
});//第二个参数默认0
console.log(0);   //0  1

把setTimeout的第二个参数设置为0s，并不是立即执行函数的意思，只是把函数放入异步队列。浏览器先执行完同步队列里的任务，才会去执行异步队列中的任务

setInterval setTimeout 是HTML DOM Window对象的两个方法。

以电脑刷新频率1000ms/60循环，页面失去焦点停止计时

//兼容写法
var requestAnimation = window.requestAnimationFrame ||window.mozRequestAnimationFrame 
||window.webkitRequestAnimationFrame 
||window.msRequestAnimationFrame
||  function (callback) {
    	setTimeout(callback, 1000 / 60);
    }
    
var timer=null;
var count=0;
mytime();//计时5次
function mytime(){
	if(++count>5){
		window.cancelAnimationFrame(timer);
		return;
	}
	timer=requestAnimation(mytime);
}