day-11.3 requestAnimationFrame，动画定时器的API，以及兼容性重写；

requestAnimationFrame()，一个动画定时器的API，是HTML5新推出的功能，怎么理解HTML5新推出的功能这个概念呢，

JS是调用WEB文档结构，实现动态WEB文档的一门语言；

HTML是文档，JS通过DOM调用、操作HTML文档，

所以requestAnimationFrame()虽然是JS的一个函数，但是HTML要提供，供JS这个函数调用的HTML节点，或者功能，让JS的这个函数去调用，JS这个函数才有意义，

所以requestAnimationFrame()其实是JS的一个函数，但是也是HTML5新推出的功能，就是先有HTML5这个功能了才，JS为了动态调用，JS才会产生这个函数API；

requestAnimationFrame()，默认间隔时间，即间隔时间是不可设置的，间隔时间默认跟浏览器的匹配，只能往参数里面添加函数；

requestAnimationframe(fn);//间隔时间默认，为浏览器的间隔时间；
function fn (){
  console.log("jaja");  
}

 

requestAnimationFrame();定时器的应用:

<script>
            var oWrap = document.getElementById("wrap"),
                initWidth = 0,
                bool = true,
                x;
                document.onclick = clickfn ;

                function clickfn() {
                    if( bool ){ 
                        !function fn() { 
                            initWidth += 2;
                            oWrap.style.width = initWidth + "px";
                            x = requestAnimationFrame(fn); //从这个例子也可以看出定时器启动的时候会独立出一个进程来管理定时器的执行；这里定时器的执行跟点击无关，只跟进程有关；
                        }();
                    }
                        else{
                        cancelAnimationFrame(x); //再次点击停止，并不是点击事件导致停止；而是关掉进程导致停止；
                    }
                    bool = !bool;
                }
</script>

 

requestAnimationFrame()的兼容问题；

if (!window.requestAnimationFrame){  //如果没有这个API，则win.re =undefined ,也就是false ，！false = true; ,这句也就是如果没有这个API，则为ture，执行代码块里的代码；
  window.requestAnimationFrame = function (fn){//用setTimeout重写一个requestAnimationFrame;
        return setTimeout(fn,1000/60);  //return一个用以取消定时器的返回值；
    }  
    window.cancelAnimationFrame = clearTimeout; //取消函数重写一样；
}

或运算符兼容性写法；

window.requestAnimationFrame =  window.requestAnimationFrame 
　　　　　　　　　　　　　　|| function (fn){
 　　　　　　　　　　　　　　　　 return setTimeout(fn,1000/60);  
　　　　　　　　　　　　　　　　　　}; //或运算符，遇到真停止；如果有则自己赋值给自己，如果没有读第二位；赋值重写函数；
window.requestAnimationFrame = window.cancelAnimationFrame || clearTimeout;