캔버스 및 자바 스크립트 객체의 자바 스크립트

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); 
          }; 

에 위의 코드를 추가 그리고 여기에 일어나는 무엇 디버깅을 기반으로 이제 (로 설정 간격을 사용하는 데 사용) 내 초기화 코드

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(); 
    };