requestAnimFrame 사용

http://jsdo.it/spectrum/rG9b
setInterval 로 bpm 카운터를 만들어봤더니 시간이 말도 안되게 안맞아서
requestAnimFrame을 사용해 오차를 측정해보았다.


var p = {
    frameRate : 60,
    fps : document.querySelector('#fps'),
    deltaTime : 0,
    onLoad : function() {
fps.onclick=p.onClick;
    },
    onClick : function() {
p.setDelta();
p.animationLoop();
    },
    setDelta : function() {
p.deltaTime = +(new Date());
    },
    animationLoop : function() {
var currentTime = +(new Date());
p.fps.innerHTML= (currentTime - p.deltaTime) +'msec/frame in 60frames';
p.setDelta();
requestAnimFrame(p.animationLoop);
    }
};

window.onload=p.onLoad;
window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
window.setTimeout(callback, 1000 / p.frameRate);
    };
})();

16/17으로 일정한 지연이 발생한다. latency 가 16ms라고 보면 되는데 이정도면 쓸만한 편.
http://html5-demos.appspot.com/ 여기를 참조하였음.