画布上的Javascript动画和Javascript对象

我在玩弄一些画布和简单的动画——我有一个简单的类来渲染我的地图

 var Map = Class.extend({
        init: function () {
            //Setup stuff       
        },
        DrawMap: function (canvas, camera) {
            //Render the map
        }
    });

我的核心应用程序代码也在课堂上

 var App = Class.extend({

        init: function (canvas) {
             //Load Stuff
        },

        GameLoop: function () {
            this.map.DrawMap(this.canvas, this.camera);
        }

    });

现在使用下面的代码可以很好地工作，我的地图可以渲染

    var canvasMap = document.getElementById('cmap');

    app = new App(canvasMap);

    setInterval(function () {
        app.GameLoop();
    }, 100);

然而，我明白这并不理想，我正试图转变为这一点http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 所以我调整了我的代码

我将上面的代码添加到我的索引页

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame ||
                          window.oRequestAnimationFrame ||
                          window.msRequestAnimationFrame ||
                          function (/* function */callback, /* DOMElement */element) {
                              window.setTimeout(callback, 1000 / 60);
                          };

并将我的初始化代码更改为使用Set Interval

    var canvasMap = document.getElementById('cmap');

    app = new App(canvasMap);

    requestAnimFrame(function() { app.GameLoop(); });

现在，根据一些调试，这里发生的是App.GameLoop方法，在我将日志添加到game loop方法后调用。然后就不再叫了。我想这是对我在JS对象方面的经验所做的。我的背景是C语言，所以这对我来说是比较新的

---

有什么理由只叫一次吗

我已经解决了这个问题，我错过了递归

   var initAll = function () {
        $(document).ready(function() {

            var canvasMap = document.getElementById('cmap');

            app = new App(canvasMap);
            mainLoop();
        });
    };

    var mainLoop  = function() {
               requestAnimFrame(mainLoop);
                app.GameLoop();
    };