Apenas um exemplo:
<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>
O que eu esperava era enviar uma mensagem na tela a cada "delay", mas isto não acontece, só exibe as 10 mensagens na tela quando o loop termina. Alguém ai conhece algum comando para forçar a exibição do texto no momento exato que ele é enviado, dentro do loop? Pretendo utilizar isto para atualizar a progress bar de uma função JS que manipula arquivos e muitas vezes demora para finalizar, o usuário pensa que o navegador travou e fecha a janela antes da função terminar. Se alguém puder ajudar, ficarei muito grato! Obs. Já tentei com setTimeout, alguns artificios para forçar o rendering, enfim, por enquanto nada funcionou, lembrando que o codigo acima é apenas um simples exemplo para ilustrar o meu problema.
setInterval
?setInterval
, ele fica rodando independentemente de estarem sendo executadas outras coisas no script. Pelo que pude entender, bastaria vc disparar umsetInterval
mostrando algo na tela, e quando seu progress terminar, basta cancelar osetInterval
.