3

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.

8
  • O que você procura seria algo como uma promise? developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… Commented 4/02/2020 às 14:59
  • Já tentou usar setInterval?
    – Sam
    Commented 4/02/2020 às 15:10
  • Ja tentei, mas também não funcionou. Não tenho muita experiencia com JS, mas me parece ser um problema conceitual da linguagem, enquanto está executando uma função não faz outra coisa até terminar aquela função. Na minha cabeça uma interrupção de tempo (setInterval ou setTimeOut) deveria ter prioridade na execucão, mas na prática parece que não acontece...
    – Veronezi
    Commented 4/02/2020 às 15:16
  • Depois que vc dispara o setInterval, ele fica rodando independentemente de estarem sendo executadas outras coisas no script. Pelo que pude entender, bastaria vc disparar um setInterval mostrando algo na tela, e quando seu progress terminar, basta cancelar o setInterval.
    – Sam
    Commented 4/02/2020 às 15:19
  • 2
    O fato é que em condições normais você não deve fazer o código dessa forma em JS (nem em linguagem nenhuma praticamente). Mesmo que existisse o que quer, ainda assim um código que consome todo processamento pode ser considerado até como tendo um bug se isso não for um objetivo específico dele. Mesmo códigos que rodam 24/7 normalmente tem um ponto em que liberam a CPU, a não ser em caso de cálculos intensos e coisas do tipo (como uma máquina dedicada a encontrar números primos ou mineração de algumacoisacoins)
    – Largato
    Commented 4/02/2020 às 21:29

3 Respostas 3

2

Existe algum comando ou função em JavaScript que controle a atualização de tela antes do loop terminar?
- Não, não existe comando ou função em JavaScript que controle a atualização de tela antes do fim dum loop.

Javascript é uma linguagem de thread único o que significa que o display em HTML só será atualizado após o laço for ser terminado.

Para fazer o seu HTML ser atualizado em um laço seria necessário lançar mão de um hipotético laço de repetição assíncrono.

A linguagem não oferece esse laço de repetição assíncrono mas é possível obter essa funcionalidade através do método setInterval() que cria um timer repetindo a chamada de uma função em um intervalo de tempo definido em milissegundos e que retorna um identificador para o timer.

Para interromper esse timer use a função clearInterval() que aceita como parâmetro o identificador para o timer que deseja interromper.

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>

1
  • 1
    Só um adendo, é possível também usar o setInterval com intervalo 0 porque ele já vai pra fila de callback por ser assíncrono, não importa o "tempo de espera". Relacionado: pt.stackoverflow.com/a/184783/100416 Commented 21/12/2020 às 14:32
1

Aqui está um exemplo de loading usando o setInterval. O setInterval espera como o primeiro parâmetro uma função que vai ser executada de forma assíncrona a cada intervalo de tempo.

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>

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

3
  • Agradeço a tentativa de me ajudarem, mas continuo com o mesmo problema: O progress bar apresentado funciona perfeitamente, atualizando a cada segundo, até ai ok, mas basta chamar uma segunda função que demore mais de alguns segundos para executar e a barra fica parada, só volta a ser atualizada quando terminar esta segunda função, que seria justamente o objetivo, acompanhar o progresso desta segunda função, monitorando em tempo real. Não entendo porque o setInterval não tem prioridade em relação a uma função ou loop por exemplo.
    – Veronezi
    Commented 4/02/2020 às 23:09
  • javascript é single thread e funciona como se fosse uma cpu com 1 core. Ela divide tempo de processamento. Se você bombardear a thread com um loop sem delay. A função não vai rodar. Se consequir enviar a forma de como você estiver fazendo o processamento. Posso te ajudar melhor, garanto que tem solução melhor do que esse while imenso. Commented 5/02/2020 às 12:42
  • Esse while imenso foi só uma maneira que encontrei de ilustrar de forma simples o meu problema real, na prática é uma função que manipula arquivos 32 bits e tem laços "for" para esta manipulação. O meu objetivo, enquanto esta manipulação ocorrer, tivesse uma sinalização na tela em tempo real, gráfica ou um simples texto do tipo "processando camada x de y", onde x seria atual e y o total. Mas todas as tentativas foram frustradas porque a tela so recebe as msg quando termina a funcão, pelo que estou percebendo não tem solução com JavaScript, teria que passar para o back-end em outra linguagem...
    – Veronezi
    Commented 6/02/2020 às 9:49
1

O seu loop só exibe a mensagem depois do final do seu loop, pois é exatamente isso que está escrito no código, veja:

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
}

caso você queira que apareça antes do loop do comando (for) experimente colocar a sua mensagem dentro do bloco while:

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

porém neste trecho de código a sua mensagem irá aparecer ate a variavel T chegue no valor 1000000, depois disso o (for) irá se repetir por 10 vezes sem fazer nada pois a sua váriavel T já vai valer 1000000, caso queira que apareça 1000000 por uma vez e pare o comando (for) recomendo escrever desta maneira:

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

desta forma o comando (for) não ira se repetir 10 vezes, o que irá se repetir é o while por 1000000 vezes e a cada vez que ele se repetir irá mostrar a sua mensagem.

outra alternativa é, repetir o comando (for) 10 vezes mostrando a mensagem por 1000000 vezes por 10 vezes:

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;
    }
1
  • Obrigado Muriel, mas no primeiro exemplo que coloquei se observar bem o texto está sendo enviado dentro do laço "for", e não fora. Se colocar dentro do loop while (neste exemplo serve apenas para criar um delay), a mensagem seria enviada 1000000 vezes ao invés de 10. Isto é apenas um exemplo, a questão é que a mensagem não vai para a tela em tempo real como ocorre no "console.log". E dai, permanece a minha pergunta, será que existe algum comando que obrigue o navegador exibir a mensagem e depois continuar o loop, mesmo que isto implique em maior lentidão. Espero ter explicado de forma clara.
    – Veronezi
    Commented 4/02/2020 às 16:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .