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/ 여기를 참조하였음.
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/ 여기를 참조하였음.
댓글
댓글 쓰기