Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

365
Visualizações
HTML file unresponsive when using while(true) game loop

I'm trying to make a game loop for an HTML / Javascript browser game I'm working on. I am currently using this code here as a loop:

while(true)
{
   (game code here)
}

The code is in an externally linked Javascript file, and should have a game loop which does not break the game.

After a bit of reading I found out that the loop makes the page unresponsive. What is the correct way to include a game loop in HTML / Javascript without breaking the page?

about 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

You should never use a while (true) loop (or anything that will always result in true).

while (true) {
  console.log("Most likely will crash the browser!");
}

I didn't make it a code snippet because it will most likely crash your browser.

What it will do (in this case) is output the string an infinite number of times (until the browser crashes).

Most likely will crash the browser!
Most likely will crash the browser!
Most likely will crash the browser!

...Stops responding...

A good alternative for a game loop is to use requestAnimationFrame().

The great things about it are:

  • It's supported in all browsers (even Internet Explorer^)!
  • It doesn't crash your browser.
  • It only runs when the tab is focused. This means it won't take up resources in the background.

According to MDN Web Docs, it states that:

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint.

It returns an long integer value, which can be used to call window.cancelAnimationFrame() to cancel it.


A simple example is below.

function loop() {
  // You don't need 'window', because by default it's global.
  requestAnimationFrame(loop);
  
  // Example...
  GameClass.updateGame();
}

The reason you pass the loop() function in requestAnimationFrame() is because it will call that function to update on the next repaint, which is why the example GameClass.updateGame() function is being called as a placeholder.

For more examples, please see the examples on MDN Web Docs. They are more advanced and will take too long to explain in this answer.


In summary, you should use the requestAnimationFrame() function in place of the while (true) loop to avoid the browser not responding.


^ Only supported in IE 10 and 11.

about 4 years ago · Santiago Trujillo Relatório

0

Javascript within the browser is blocking of any user input. It is also single threaded. Nothing is allowed to change while a function is running. Hence the browser is unresponsive until the script stops. It is this way be design so you don't need to worry if the data you received on the mouse or about the page had changed ... imagine if your program was reading the page information, it changed then you needed to update it using the information you read before it changed ... single threaded means you don't need to worry about that. It did not change the browser was unresponsive.

Note web workers run in a different thread and can signal or event to the functions that update the page. Web workers don't block the browser. And web workers can not update the HTML directly, less the page changed before function ended happens.

Hence you need to run the loop then allow the browser to interact and run the loop again.

setTimeout() has been the old school method, note the delay is optional, (if no delay is used it will start as soon as everything else the browser need to do is completed ... IE get user input)

function gameloop() {
   (game code here)
   setTimeout(gameloop); // technically the script stopped until the timeout event.
}

setTimeout(gameloop); // fire event with no delay. IE start loop.

New school is requestAnimationFrame() as per Arnav's answer. requestAnimationFrame() is faster hence better.

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda