Ir ao conteúdo
  • Cadastre-se

Javascript Timer com pequeno atraso (CountUp Timer)


Posts recomendados

Eu pesquisei por timer em javascript para usar em off no browser. Ele funciona muito bem e eu só tive que inserir a hora. Como eu só preciso da informação de quem já tem muito conhecimento na área, eu creio que eu não preciso passar muita informação.

 

Resumindo: Em minutos tem "seconds / 60". Fazendo um cálculo rápido, eu apenas inseri um "3600" na hora. Eu só gostaria de ter certeza se eu fiz certo.

Edit

 

Comparando com um app em meu smartphone, o timer em JS apresenta pequeno atraso nos segundos. E antes que perguntem, a bateria do meu smartphone dura muito pouco e não da para o que eu preciso.

 

edit2

 

Todos os javascripts geram um atraso depois de alguns minutos. Por quê?

 

Edit 3

 

Eu estou testando em outro navegador.

<div class="timer">
            <span id="hours">0</span> hour(s)
            <span id="minutes">0</span> minute(s)
            <span id="seconds">0</span> seconds.
        </div>
        <input id="start-button" type="button" value="START" onclick="startTimer()"></input>
        <input id="stop-button" type="button" value="STOP" onclick="stopTimer()"></input>
        <hr/>
        <footer>
            <p>Created by Stephen Moon 2015</p>
            <p><a href="http://www.logicalmoon.com">http://www.logicalmoon.com</a></p>
        </footer>
        <script type="text/javascript">
            activateButtons(false, true);
            
            function startTimer() {
                var seconds = 0;
                timer = setInterval(function() {
                    seconds ++;
                    document.getElementById("hours").innerText = parseInt(seconds / 3600);
                    document.getElementById("seconds").innerText = seconds % 60;
                    document.getElementById("minutes").innerText = parseInt(seconds / 60);
                    activateButtons(true, false);
                }, 1000);
            }
            
            function stopTimer() {
                clearInterval(timer);
                activateButtons(false, true);
            }
            
            function activateButtons(start, stop) {
                document.getElementById("start-button").disabled = start;
                document.getElementById("stop-button").disabled = stop;
            }
        </script>
Link para o post
Compartilhar em outros sites

@Lerub O calculo da hora está correto

 

O uso do setInterval() pode ocasionar efeitos indesejável, e quando sua aplicação não está em primeiro plano o javascript dá sua aplicação vai perde prioridade de execução e isso vai ocasionar um delai no seu setInterval.

 

Você pode usar web workers na sua aplicação para corrigir isso, já que os web workers tem prioridade de execução.

 

E tem uma pequena falha no seu minuto:

image.png.b8d87282bc2713881afc2c3f8ad218ac.png

 

Você pode corrigir isso pegando o resto da divisão por 60 da divisão por 60 dos segundos.

document.getElementById("minutes").innerText = parseInt(seconds / 60) % 60;

 

  • Curtir 1
Link para o post
Compartilhar em outros sites

@Lerub Você pode trabalhar usando objeto data do javascript.

Link para o post
Compartilhar em outros sites

Bem na hora que você postou eu ia escrever que deu 2h17m e parece tá de boa.

 

De qualquer modo, eu pesquisarei sobre isso.

 

Edit

 

Em relação ao Delay, eu me lembrei de uma coisa. Eu jogava um jogo chamado Candy Box que quando eu deixava a aba em segundo plano, o contador parava. O jogo é todo em JS.

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

minicurso-montagem-popup.jpg

MINICURSO GRÁTIS!

Como ganhar dinheiro montando computadores!

CLIQUE AQUI E INSCREVA-SE AGORA MESMO!