深入理解三个定时器

最好用的是requestAnimationFrame，有篇详细描述的文章，其次setItmeout和setInterval是有缺点的。他们都不精确有篇文章有(具体描述)[http://www.cnblogs.com/xiaohuochai/p/5773183.html#anchor3]。他们的时间参数是指创建了定时器后，把定时器代码添加到浏览器UI线程里的时间。比如5s的时候创建了定时器，定时器的时间间隔参数是250s,那么255s的时候，定时器代码被加入线程里等待执行。如果255s的前面还有其他任务，在255s后还没执行完毕，那么定时器代码需要等待它执行完毕才能执行。从时间上无法做到绝对精准，有可能延迟。
requestAnimationFrame在MDN上是说在下一次重绘之前调用指定的函数来更新动画。采用的是系统时间间隔。
特点：
【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
【2】在隐藏或不可见的元素中，将不会进行重绘或回流，意味着更少的CPU、GPU和内存使用量。
【3】requestAnimationFrame由浏览器专门为动画提供API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省CPU开销。

兼容

IE9不兼容，可以用setTimeout来兼容。

if(!window.requestAnimationFrame){
    var lastTime = 0;
    window.requestAnimationFrame = function(callback){
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0,16.7-(currTime - lastTime));
        var id  = window.setTimeout(function(){
            callback(currTime + timeToCall);
        },timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    }
}

if(!window.cancelAnimationFrame){
 window.cancelAnimationFrame = function(id) {
  clearTimeout(id);
 }
}