Анимация Javascript на объектах Canvas и Javascript

Question

Я играю с холстом и простой анимацией - у меня был простой класс для рендеринга моей карты.

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 вызывается один раз (я добавил журнал в метод игрового цикла). И затем снова не вызывается. Я полагаю, что это делается с моим опытом работы с объектами JS. Мой фон находится на C#, поэтому это относительно новое для меня.

Любые причины, почему это можно было бы назвать только один раз?

Answer 1

Я исправил это, я пропустил рекурсию.

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

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

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

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