Несовместимые тайм-ауты в JavaScript с setTimeout?

Question

Я создаю игру.В игре есть 1 основной цикл:

//draws a new frame and game logic
function draw()
{
   player.gameTick();
   game.gameTick();

   lastTime=newTime; 

   background.draw(ctx);
   player.draw(ctx);
   enemies.draw(ctx);
   setTimeout(draw,50);
}

Обычно это работает нормально, и я получаю сообщение о 20fps в #console.Время от времени, однако, fps достигает> 125.(имеется в виду, что вызов вызывается менее чем через 50 миллисекунд после предыдущего вызова).Когда это происходит, игра начинает отставать на пару секунд, а затем fps возвращается вниз.(это также противоречит интуиции, почему ВЫСОКИЙ fps вызывает задержку?)

В любом случае, кто-нибудь знает, почему это так?

Да, я тоже попробовал setInterval (), и то же самоеслучается.= /

Answer 1

JavaScript является однопоточным.Если вы планируете два тайм-аута на 50 мс независимо, есть вероятность, что они в конечном итоге столкнутся или приблизятся к нему и вызовут странную блокировку обработки на секунду, прежде чем они уладятся и снова смогут выйти из строя.Возможно, вам следует объединить код и создать один основной цикл, который вызывает две другие функции.Таким образом, вы можете убедиться, что они оба обрабатывают один раз каждые 50 мс.

Ваш поток выглядит примерно так:

1. Process1 () -> занимает некоторое количество времени, надеюсь меньшечем 50 мс, но гарантированно будет> 0 мс.
2. Process1 устанавливает для себя тайм-аут в будущем на 50 мс.2-й запуск Process1 произойдет более чем через 50 мс после его запуска в первый раз.
3. Process2 () -> занимает некоторое время, превышающее 0 мс.То же, что Process1.
4. Process2 устанавливает тайм-аут для себя.Применяются те же правила.2-й запуск Process2 произойдет более чем через 50 мс после его запуска в первый раз.

Если, теоретически, Process1 занимает 5 мс, а Process2 занимает 7 мс, каждые 7 запусков Process1 или 5 запусков Process2 вызовутследующий тайм-аут установлен на 50 мс в будущем, чтобы точно соответствовать запланированному времени следующего запуска другой функции.Этот тип коллизий вызовет противоречивое поведение, когда интерпретатору, который может делать только одну вещь за один раз, будет предложено обрабатывать несколько событий одновременно.

- Изменения ваших изменений в вопросе -

Вы по-прежнему устанавливаете два независимых тайм-аута на 50 мс в будущем.Все еще нет способа предотвратить их столкновение, и я все еще не совсем уверен, почему вы подходите к этому так.У вас должно быть что-то вроде этого:

function mainLoop() {
  player.tick();
  game.tick();
  background.draw();
  players.draw();
  enemies.draw();
  setTimeout(mainLoop, 50);
}

mainLoop()

Обратите внимание на отсутствие повторяющихся вызовов setTimeout.Все может случиться за один раз.Вы создаете коллизии в обеих версиях продемонстрированного вами кода.

Answer 2

Эта проблема была вызвана регулированием таймера JavaScript в браузере.Я заметил, что проблема усугубляется, когда у меня открыто много вкладок или когда я переключаюсь между вкладками.В Chrome меньше проблем, скорее всего из-за того, что вкладки находятся в изолированных процессах.

Firefox 7, похоже, исправил эту проблему для FF.