JavaScript基础 requestAnimationFrame

requestAnimationFrame（不兼容IE8及以下）

功能相当于setTimeout( fn , 13 );
===>贴合浏览器的刷新频率一致；
requestAnimationFrame( fn )没有时间，和浏览器的刷新频率一样，性能非常好
如果不考虑兼容用requestAnimationFrame来用动画

css3的transfrom和animation的低层原理就是这个来做的；

特性：
1、当你浏览器开其他网页时，原网页的动画会停止，再回来浏览原网页时继续动画

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