#9 - Cronômetro em JavaScript

Esse projeto consiste em um cronômetro feito com javascript. Nele, o usuário tem a possibilidade de iniciar, pausar, retomar e zerar o dispositivo.

A primeira vista, o funcionamento básico do cronômetro se daria através dos seguintes passos:

• -> Usuário inicia o cronômetro.
• -> O valor de uma variável chamada valCrono é incrementado a cada cem milissegundos através da função setInterval().
• -> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
• -> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.

Na teoria, tudo certo, porém um comportamento peculiar do javascript fez com que o cronômetro não funcionasse de forma correta seguindo a lógica acima. Esse comportamento faz com que quando a a página não está sendo visualizada (seja pela janela estar minimizada ou por outra aba estar selecionada) a função setInterval() trabalhe num ritmo bem mais lento, isso, quando o intervalo de tempo em que a função deve ser chamada é inferior a mil milissegundos (nesse caso, ele era de cem milissegundos).

Mudar o intervalo de tempo de chamamento da função para mil milissegundos resolveria esse problema, mas criaria outro, pois dessa forma não seria possível calcular os centésimos transcorridos.

Por fim, o problema foi resolvido mudando-se a lógica básica do script para a que se observa abaixo:

• -> Usuário inicia o cronômetro.
• -> O valor de uma variável chamada tmpIni é definido através da função new Date(). Com isso, essa variável passa a armazenar uma data e uma hora, no caso, a data e a hora do sistema operacional no exato momento em que o cronômetro foi iniciado.
• -> O valor de uma variável chamada tmpAtual é definido também com a função new Date() e atualizado a cada *cem milissegundos através da função setInterval().
• -> O valor da variável valCrono recebe a subtração entre as variáveis tmpAtual e tmpIni.
• valCrono = tmpAtual - tmpIni; // Essa subtração sempre retornará o total de milissegundos que se passou entre a data/hora armazenada na variável tmpAtual e a data/hora armazenada tmpIni.
• -> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
• -> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.

*A função setInterval() segue trabalhando em ritmo mais lento quando a página não está selecionada, porém, como o script não se baseia mais em simplesmente incrementar o valor de uma variável a cada cem milissegundos, isso já não é mais um problema. Sempre que a página voltar a ser visualizada a data e a hora do sistema operacional serão colhidos e os cálculos necessários serão feitos baseados neles.

Claro que existem outras peculiaridades no funcionamento do script, mas isso eu deixarei para quem tiver curiosidade de olhar para ele descobrir.

Download Link

This is the end.