的RangeError使用requestAnimationFrame

Question

，我發現了以下錯誤：

RangeError: Maximum call stack size exceeded. 

該行：

requestAnimFrame(Game.loop()); 

在這一塊代碼：

var Game = { 
    canvas:  null, 
    context: null, 
    targetFps: 60, 

    init: function() { 
     canvas = document.getElementById('main-canvas'); 
     context = canvas.getContext('2d'); 

     // Resize canvas to match content 
     var content = document.getElementById('primary-content'); 
     canvas.width = content.offsetWidth;    
     canvas.height = content.offsetHeight; 

     window.requestAnimFrame = (function() { 
      return window.requestAnimationFrame  || // Chromium 
        window.webkitRequestAnimationFrame || // WebKit 
        window.mozRequestAnimationFrame  || // Mozilla 
        window.oRequestAnimationFrame  || // Opera 
        window.msRequestAnimationFrame  || // IE 
        null; 
     })();     

     this.loop(); 
    }, 

    loop: function() { 
     requestAnimFrame(Game.loop()); 
    }, 

    update: function() { 
     // ... 
    }, 

    draw: function() { 
     // Clear background with black 
     context.fillStyle = '#000'; 
     context.fillRect(0, 0, canvas.width, canvas.height); 
    } 
}; 

Game.init(); 

這也可能是明顯的東西我」俯瞰，但任何幫助將不勝感激。謝謝！

Answer 1

您調用的函數馬上強似它：

loop: function() { 
     requestAnimFrame(Game.loop()); 
    } 

只會繼續一遍又一遍做Game.loop()。

你想要的是：

loop: function() { 
     requestAnimFrame(Game.loop); 
    } 

這將傳遞給函數作爲參數傳遞給requestAnimFrame，而不是調用Game.loop()和傳球的結果（undefined）。