requestAnimationFrame

<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>

<script>

// 根据浏览器

var demo = document.getElementById('demo');

function render(){

demo.style.left = parseInt(demo.style.left) + 1 + 'px'; //每一帧向右移动1px

}

// requestAnimationFrame 告诉浏览器执行一个动画，该动画在浏览器再次执行重绘的之前执行。

// 注意！若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

// 单位是赫兹 90Hz（每秒更新90次），那么这个时间间隔就变成了1000/90=11.11ms

window.requestAnimationFrame(function(a,b,c){

console.log(a,b,c)

render();

//当超过300px后才停止

if(parseInt(demo.style.left) <= 300){

window.requestAnimationFrame(arguments.callee);

}

});

</script>