requestAnimationFrame（不兼容IE8及以下）
功能相当于setTimeout( fn , 13 );
===>贴合浏览器的刷新频率一致；
requestAnimationFrame( fn )没有时间，和浏览器的刷新频率一样，性能非常好
如果不考虑兼容用requestAnimationFrame来用动画
css3的transfrom和animation的低层原理就是这个来做的；
<div>
<img src="images/a1.jpg" height="411" width="658" alt="#"/>
</div>
<script>
var oDiv = document.getElementsByTagName( 'div' )[0],
num = 0;
!function fn(){
num ++;
oDiv.style.height = num + 'px';
requestAnimationFrame( fn );
}();
</script>
特性：
1、当你浏览器开其他网页时，原网页的动画会停止，再回来浏览原网页时继续动画
<script>
var oDiv = document.getElementsByTagName( 'div' )[0],
num = 0;
!function fn(){
num ++;
document.title = num;
requestAnimationFrame( fn );
}();
</script>
image.png
image.png
浏览其他网页时会停下来
image.png
image.png
2、即使一个页面中有多个requestAnimationFrame最终会统一运动；
清除cancelAnimationFrame();
var x = requestAnimationFrame( fn );
cancelAnimationFrame( x );
兼容所有写法
function setAnimation( fn , time ){
return window.requestAnimationFrame ? requestAnimationFrame( fn ) : setTimeout( fn , time );
}
function clearAnimation(t){
return window.cancelAnimationFrame ? cnacelAnimationFrame( t ) : clearTimeout( t );
}
