Is there a command or function in Javascript that controls the screen update before the loop ends?

Question

Just one example:

<script>
for (var i=0;i<10;i++) { //Inicia loop for para contar de 0 até 9
 var t=0; // inicia variável t com valor 0
 while(t<1000000) { //inicia loop enquanto t for menor que 1000000
   t++; //Incrementa o t, ou seja, t = t + 1
 } // Encerra o loop while, que neste caso não faz nada apenas cria um delay, mantendo o processador ocupado com a contagem, propositadamente!
 document.getElementById('mensagem').innerHTML = `teste msg na tela ${i}` // Envia uma mensagem para a tela através de uma DIV por exemplo <<<aqui não funciona em tempo real>>>
 console.log(`teste msg na tela ${i}`)//Envia mensagem para o console <<<aqui está funcionano em tempo real>>>
} // finaliza o loop for, se for menor que 10 volta para a linha "var t=0"
</script>

What I expected was to send a message on the screen at each "delay", but this does not happen, it only displays the 10 messages on the screen when the loop ends. Does anyone there know any commands to force the display of the text at the exact moment it is sent, within the loop? I intend to use this to update the Progress bar of a JS function that handles files and often takes time to finish, the user thinks that the browser has locked and closes the window before the function ends. If anyone can help, I’d be grateful! Obs. I tried with setTimeout, some artificials to force the Rendering, anyway, for now nothing worked, remembering that the above code is just a simple example to illustrate my problem.

Answer 1

Javascript is a single thread language which means that the HTML display will only be updated after the loop is finished.

To make your HTML be updated in a loop you would need to use a hypothetical asynchronous repeat loop.

The language does not offer this loop of asynchronous repetition but it is possible to obtain this functionality through the method setInterval() which creates a timer by repeating the call of a function in a time interval defined in milliseconds and which returns an identifier for the timer.

To stop this timer use the function clearInterval() which accepts as parameter the identifier for the timer you want to interrupt.

var i = 0;
var j = 0;

var menssagem = document.getElementById('mensagem');
//Executa o laço a cada décimo de segundo
var loop = setInterval(() => {
  menssagem.innerText = `teste msg na tela ${i}`;
  if (i >= 10) {
    clearInterval(loop); //Se i for maior ou igual a dez encerra o laço
  } else {
    i++; //Se i for menor que 10 incrementa i 
  }
}, 100);
//Executa um segundo laço em paralelo em com duração
//e um tempo de atualização diferentes
var loop2 = setInterval(() => {
  console.log(`teste msg no console ${j}`);
  if (j >= 20) {
    clearInterval(loop2);
  } else {
    j++;
  }
}, 55);

<span>Teste em tempo real: <span id='mensagem'></span></span>

Answer 2

Here is an example of loading using setInterval. The setInterval expects as the first parameter a function that will be executed asynchronously at each time interval.

let perc = 0;
let id = null;
$(document).ready(() => {
	id = setInterval(() => {
  	console.log("executing function");
  	perc += 10;
  	$('.progress-bar').css('width', perc+'%').attr('aria-valuenow', perc);
    $('.progress-bar').innerHtml = perc + "%";
    if(perc >= 100) {
    	clearInterval(id);
    }
  }, 1000);
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Follows jsFiddle: https://jsfiddle.net/cf9w7eur/9/

Answer 3

Your loop only displays the message after the end of your loop, because that is exactly what is written in the code, see:

for (var i=0;i<10;i++) {
 var t=0;
 while(t<1000000) {
   t++;
 }
 document.getElementById('mensagem').innerHTML = `teste msg na tela ${i}` //a mensagem so esta sendo exibida logo apos todo o seu loop for concluido
}

if you want it to appear before the loop of the command (for) try placing your message inside the while block:

for (var i=0;i<10;i++) {
 var t=0;
 while(t<1000000) {
   document.getElementById('mensagem').innerHTML = `teste msg na tela ${i}`
   t++;
 }
}

however in this code snippet your message will appear until the variable T reaches the value 1000000, after that the (for) will repeat for 10 times without doing anything because your variable T will already be worth 1000000, if you want to appear 1000000 for once and stop the command (for) recommend writing this way:

for (var i=1;i<1;i--) {
 var t=0;
 while(t<1000000) {
   document.getElementById('mensagem').innerHTML = `teste msg na tela ${i}`
   t++;
 }
}

this way the command (for) will not repeat 10 times, what will repeat is the while for 1000000 times and each time it repeats will show your message.

Alternatively, repeat the command (for) 10 times showing the message per 1000000 times per 10 times:

for (var i=0;i=10;i++) {
     var t=0;
     while(t<1000000) {
       document.getElementById('mensagem').innerHTML = `teste msg na tela ${i}`
       t++;
     }
       var t = 0;
    }

hope I’ve helped!