RangeError with 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).