代码
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
具体这是什么 有什么好处 请找度娘 大致就是无限setTimeout 的递归套
我只做个简单的demo
<!DOCTYPE html>
<html>
<meta charset="utf-8" content="text/html">
<head>
<title></title>
</head>
<body>
<div id="div1" style=" 100px; height: 100px; background: red; color:#fff ;position: absolute; left: 0; top: 0;">
点我停下来
</div>
<script type="text/javascript">
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
var Animate=false;
var x=0;
//普通递归
// feiris();
// function feiris(){
// if(Animate){return false;}
// x++;
// document.getElementById("div1").style.left=x+"px";
// setTimeout(function(){
// feiris();
// },16);
// };
//利用缓动
function autoMove() {
x++;
document.getElementById("div1").style.left=x+"px";
}
(function animloop(){
autoMove();
if(!Animate){requestAnimFrame(animloop);}//elem没有用
})();
document.getElementById("div1").onclick=function(){
Animate=true;
}
</script>
</body>
</html>
然后各位可以chrome对比性能