RequestAnimationFrame的RangeError

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）。