上次写节拍器的时候用到了h5计时器,但只是简单的记录了一点,今天特在此总结一下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*没有时间设置 电脑的帧率 刷新 1000/60 16.6667ms*/
/*(function loop(){
console.log(1);
window.requestAnimationFrame(loop);
})();*/
/*兼容性写法*/
window.requestAnimate=(function (){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
var count=0;
(function loop(){
window.requestAnimate(loop);
count++;
if(count>=20)
{
count=0;
console.log(1);
}
//关闭
window.cancelAnimationFrame(loop)
})();
</script>
</body>
</html>
这个计时器的优点很多,简单来说就是bug少,资源占用少所以性能也好。相对于之前的js计时器,它的性能是巨大的。