-1

Estou querendo colocar um timer numa pagina, a função funciona, mostra o tempo progressivamente, mas percebi que o uso do "setInterval()" começa a consumir muito processamento da pagina até o ponto do navegador travar por segurança.

Por que depois quero calcular a diferença da hora atual e a hora que abriu a pagina. Tem outro jeito de fazer?

function tempo(){

 var hora = document.getElementById('hora');

 var data = new Date(); 
 hora.value = data.toLocaleTimeString('pt-BR');


 verificarHorario();
 setInterval(tempo ,1000);
}

function verificarDiferencaHorario(inicialMin, finalMin) {
 var totalMin = Number(finalMin - inicialMin);
 var hora2 = document.getElementById('hora2');

 hora2.value = ((Math.trunc(totalMin / 60).toString() + ":" + (totalMin % 60).toString()));
}

function verificarHorario() {

 var inicial = "11:20"; //teste

 var hora = document.getElementById('hora');
 var final = "12:20"; //teste
 var splInicial = inicial.split(":"), splFinal = final.split(":");

 var inicialMin = (Number(splInicial[0] * 60)) + Number(splInicial[1]);
 var finalMin = (Number(splFinal[0] * 60)) + Number(splFinal[1]);

 verificarDiferencaHorario(inicialMin, finalMin);
}   

1 Resposta 1

1

Tem como melhorar esse código...

  1. Crie as referências para os elementos fora das funções, assim só serão criadas uma vez

  2. Use funções recursivas com setTimeout em vez de usar setInterval, pode melhorar (motivo), mas não necessariamente vai

  3. Não crie uma nova instância da Date, apenas "atualize" a antiga

Código:

const hora = document.getElementById('hora');

const hora2 = document.getElementById('hora2');

const data = new Date();

(function tempo() {
  hora.value = data.toLocaleTimeString('pt-BR');

  verificarHorario();

  data.setSeconds(data.getSeconds() + 1)

  setTimeout(tempo, 1000);
})();

function verificarDiferencaHorario(inicialMin, finalMin) {
  var totalMin = Number(finalMin - inicialMin);
  hora2.value = ((Math.trunc(totalMin / 60).toString() + ":" + (totalMin % 60).toString()));
}

function verificarHorario() {
  var inicial = "11:20"; //teste
  var final = "12:20"; //teste

  var splInicial = inicial.split(":"),
      splFinal = final.split(":");

  var inicialMin = (Number(splInicial[0] * 60)) + Number(splInicial[1]);
  var finalMin = (Number(splFinal[0] * 60)) + Number(splFinal[1]);

  verificarDiferencaHorario(inicialMin, finalMin);
}
<input id="hora" readonly>
<input id="hora2" readonly>

1
  • Não funcionou, os input não recebem os e a variavel data não atualiza. O que resolveu meu problema foi remover o setInterval da função tempo e colocar fora do escopo da função. assim: var myVar = setInterval(tempo, 1000); 1/03/2019 às 14:31

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 .