上次寫節拍器的時候用到了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計時器，它的性能是巨大的。