requestAnimationFrame

arf

setTimeout

语法：setTimeout(function,delay)

定义：setTimeout()方法用于在delay毫秒数之后调用函数或计算表达式。

setTimeout()指定的时间间隔表示何时将定时器的代码添加到任务队列中，而不是何时执行代码。

setInterval

语法：setInterval(function,delay)

定义：setInterval()方法可按照指定的delay周期（以毫秒计）来调用函数或计算表达式。　

使用setInerval()创建的定时器确保定时器代码规则地插入任务队列中。不过仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。这种重复定时器会存在如下问题：

在某些间隔会被跳过
多个定时器的代码执行之间的间隔可能会被预期的小

可以通过如下链式setTimeout()调用模式来避免类似问题：

setTimeout(function() {
  // do something. . . .
  setTimeout(arguments.callee, interval);
}, interval);

不过setInterval()会不停地调用函数，直到窗口关闭或调用clearInterval()。当然如果链式setTimeout()调用模式没有终止逻辑，也会一直运行下去。因此再不需要重复定时器时，确保对定时器进行清除，避免占用系统资源。

requestAnimationFrame

在JavaScript中创建动画的典型方式就是使用setInterval()方法来控制所有动画（或链式setTimeout()调用模式）。编写这种动画循环的关键是要知道延迟时间多长适合。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得更平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化。通常电脑显示器的刷新频率是60Hz，大概相当于每秒重绘60次，平均每次约等于17ms(1000ms/60)，以这个循环间隔重绘动画可到达最平滑效果。
虽然与使用多组setTimeout()的循环方式相比，使用setInterval()的动画循环效率更高，但后者也不是没有问题的。无论是setInterval()还是setTimeout()都不十分精确。传递给它们的第二个参数，实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间点。如果队列前面已经加入了其他的任务，那动画代码就要等待前面的任务完成后再执行。另外，要保证动画平滑的关键是要知道下一帧的绘制时间点，而开发人员没有办法确保浏览器按时绘制下一帧。加上浏览器使用的计时器并非精确到毫秒级别。

CSS的transition和animation效果优于JavaScript实现的动画效果，原因在于CSS知道动画什么时候开始，会计算出正确的循环间隔，在适合的时候刷新UI。基于该问题，浏览器为了JavaScript动画添加了一个新API，即requestAnimationFrame()。

语法：requestAnimationFrame(callback);

定义：告诉浏览器希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。

该方法使用一个回调函数callback作为参数，这个回调函数callback会在浏览器重绘之前调用。回调频率通常是每秒60次。回调函数callback会被传入一个参数DOMHighResTimeStamp，指示从触发requestAnimationFrame回调到现在的时间。requestAnimationFrame(callback)会返回一个long整数，请求ID，也是回调列表中唯一的标识，一个非零值，可以传此值到 ancelAnimationFrame(requestID)以取消回调函数。

requestAnimationFrame基本思想是利用显示器的刷新机制，与刷新频率保持同步，并利用这个刷新频率进行页面重绘更新。不过需要注意：因为JavaScript单线程工作机制，如果主线程一直处于繁忙状态，那么requestAnimationFrame的动画效果也会受影响的。

使用

使用requestAnimationFrame的时候，只需反复调用它即可：

function animation() {
  // do something ....
  requestAnimationFrame(animation);
}
requestAnimationFrame(animation);

优势

与setTimeout和setInterval相比，requestAnimationFrame有如下优势：

在后台标签页、不活动标签页、最小化窗口中，requestAnimationFrame会自动暂停，节省系统资源为其他任务。
在一个帧中对DOM的所有操作，只进行一次Layout和Paint更新。
利用显示器的刷新机制，知道动画何时开始，能确定动画最佳循环间隔时间及代码何时执行，并在适合的时候刷新UI。

不活动标签页中，setInterval与requestAnimationFrame的活动状态：

	setInterval	requestAnimationFrame
IE9-	no	no supported
IE10+	no	paused
Chrome9-	no	no supported
Chrome10	no	paused
Chrome10+	>=1000ms	paused
Firefox3-	no	no supported
Firefox4	no	1s
Firefox5+	>=1000ms	2ns (n = number of frames since inactivity)
Safari5-	no	no supported
Safari6	no	paused
Safari7+	>=1000ms	paused
Opera12-	no	no supported
Opera15+	>=1000ms	paused

注：

-: <=
+: >=
no: 没影响
no supported: 不支持
paused: 暂停
>=1000ms: 时间间隔大于等于1000ms，即如果时间间隔小于1000ms会被调整为1000ms，如果时间间隔大于等于1000ms会用指定时间间隔
1s | 2ns: 时间间隔（在Firefox不活动标签页中，requestAnimationFrame每帧消耗时间以2的次方依次递增：1s、2s、4s、8s…..）

兼容性：

polyfill：

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (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);
        };
}());

setTimeout

setInterval

requestAnimationFrame

使用

优势

兼容性：

polyfill：

参考文章