Блог

Я борюсь с этим и, похоже, не могу найти много ссылок для продолжения.

Я использую requestAnimFrame, который был написан Google:

 requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame ||
     window.oRequestAnimationFrame ||
     window.msRequestAnimationFrame ||
     function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
       window.setTimeout(callback, 1000/60);
     };
})();
  

У меня есть функция «init», которая настраивает мою игру. Затем вызывается update, который является игровым циклом, который вызывает render для рисования на canvas. Если вы игнорируете requestAnimFrame — каждая отдельная часть работает нормально. Как только я размещаю вызов requestAnimFrame в though, я либо получаю ошибку «слишком много рекурсии», либо FF просто вылетает.

Мой код в update() выглядит следующим образом:

 game.update = function()
{
    stats.update();
    fps.innerHTML = stats.getFPS();

// Render objects
game.render();
// Continue game loop
requestAnimFrame(game.update());
}
  

stats.update просто обновляет счетчик кадров в секунду. Как видите, эта функция мало что делает. Моя функция game.render просто отрисовывает множество плиток на холст, и это работает нормально.

Есть предложения?

Спасибо!

Крис

Вам нужно передать функцию, а не результат вызова функции. Другими словами, измените это:

 requestAnimFrame(game.update());
  

К этому:

 requestAnimFrame(game.update);
  

То, как это происходит в данный момент, перейдет в game.update , сделает свое дело, а затем попытается вычислить выражение:

 requestAnimFrame(game.update())
  

Для того, чтобы оценить это, сначала необходимо оценить аргумент requestAnimFrame :

 game.update()
  

Это просто обратный вызов функции к самой себе, приводящий к бесконечной рекурсии до ошибки переполнения стека / слишком большой рекурсии. Он никогда не получает вызова requestAnimFrame , потому что он всегда оценивает внутренний аргумент.