A ver si con un ejemplo queda más claro (traté de imaginar a qué llamás run y a qué paint; no sé si lo logré
):
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#c{width:50px; height:50px; position:absolute; background:orange;}
</style>
<script type="text/javascript">
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 17);
};
})();
function run(p){
//calcular movimiento y redibujar
var el=document.getElementById('c'), x=parseInt(el.style.left,10) || 0;
if(x<0 || x>960){
p*=-1;
}
x+=p;
setTimeout(function() {
requestAnimFrame(function(){run(p);});//volvemos a llamar a run
paint(x);
}, 17);
}
function paint(x){
//redibujar
document.getElementById('c').style.left=x+'px';
}
onload=function(){run(5);};
</script>
</head>
<body>
<div id="c"></div>
</body>
</html>