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 );
        }