今天看了下cocos2d-javascript的源代码，说实话代码好乱，可能是和它特殊的打包方式有关。以至于一般的前端代码的读法有些不管用。花了一段时间才发现它的主要动画循环的js：Direct.js。

结果发现cocos2d-javascript里面动画循环代码如下：

   /**
     * The main loop is triggered again. Call this function only if
     * cocos.Directory#stopAnimation was called earlier.
     */
    startAnimation: function () {
        var animationInterval = 1.0 / this.get('maxFrameRate');
        this._animationTimer = setInterval(util.callback(this, 'drawScene'), animationInterval * 1000);
    },

它使用了setInterval这个定时器执行动画循环。因为javascript是单线程的，所以如果js的执行时间过长会导致页面卡死，如果是用setInterval，并且间隔时间小于每次计算的时间（js执行时间）那么会导致浏览器没有空隙去渲染ui，也就是界面卡死的情况。

用setInterval的优点是间隔时间是确定的，方便计算位置等参数。

不过这个优点可以忽略不计，毕竟用setTimeout可以防止卡死情况的出现。

当然setTimeout也是由缺陷的。当用户最小化窗口，或者进入另外一个tab的时候，setTimeout和setInterval还是会照样运行！这样会白白消耗内存和cpu。

虽然有些浏览器有优化，比如firefox 5的新特性：后台不活动标签页的 setTimeout 和 setInterval 限定为 1000ms。但是依旧还是在运行！所以我们希望由浏览器来决定什么时候去运行动画，这样即可以减少多余消耗，也可以让动画更刘畅。于是出现 了：requestAnimFrame。它是接受一个回调函数来执行绘制代码。但是由于各个浏览器的支持不一样，所以需要一些优雅降级。

// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// shim layer with setTimeout fallback

(function(){

    // chrome shipped without the time arg in m10
    var timeundefined = false;
    if (window.webkitRequestAnimationFrame){
        webkitRequestAnimationFrame(function(time){
            timeundefined = (time == undefined);
        });
    }

    window.requestAnimFrame = (function(){
      return window.requestAnimationFrame ||
              (!timeundefined && window.webkitRequestAnimationFrame) ||
              window.mozRequestAnimationFrame ||
              window.oRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              function(callback, element){
                return window.setTimeout(function(){
                    callback(+new Date);
                }, 1000 / 60);
              };
    })();

})();

2012年3月28日修改过

不过requestAnimeFrame也有个缺点：就是没有clearTimeout这样对应的函数，所以如果是用于游戏这样的循环代码是没办法从外部打断的。必须是在循环函数内部取消循环。

标准提供了cancelAnimationFrame函数，用于外部打断（感谢mdmeo的提示）。

于是我们可以把游戏里面的主循环代码写成：

window.clearRequestTimeout = function(id) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(id) :
    window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(id) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(id) : /* Support for legacy API */
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(id) :
    window.oCancelRequestAnimationFrame	? window.oCancelRequestAnimationFrame(id) :
    window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(id) :
    clearTimeout(id);
};
function Animation() {
    this.animeId;
    this.startAnimation = function() {
        var self = this;
        self.lastTime = +new Date();
        self.animeId = requestAnimFrame(function( time ) {
            var delayTime = time - self.lastTime;
            // doSomething( delayTime ); // do some paint and calculate
            console.log( delayTime );
            self.startAnimation();
        });
    },
    this.stopAnimation = function() {
        clearRequestTimeout( this.animeId );
    }
}

参考：

1. https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
2. http://paulirish.com/2011/requestanimationframe-for-smart-animating/
3. https://gist.github.com/917153
4. http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation