Por que cronômetros do navegador atrasam, e como um timer online mantém a precisão

Um cronômetro no navegador é preciso quando lê o relógio, não quando conta os ticks. Salve o horário de término quando o timer começar e subtraia o horário atual cada vez que a tela for atualizada. Os ticks podem chegar atrasados ou ser desacelerados em uma aba em segundo plano, mas a subtração continua correta no momento em que a página a verifica.

Cronômetro onlinePrecisa de um timer ou cronômetro?Use de graça

Por que contar ticks causa atraso

Uma forma comum de escrever um timer é subtrair um do contador a cada segundo. O navegador executa essa etapa com um temporizador repetitivo, que pede para uma função rodar a cada certo número de milissegundos. O navegador não garante um tempo exato. Uma página ocupada, um dispositivo lento ou uma aba oculta podem atrasar cada tick, e os atrasos se acumulam. Um contador que perde alguns milissegundos por tick fica visivelmente errado depois de poucos minutos.

O que as abas ocultas fazem

Os navegadores desaceleram os timers em abas que você não está olhando. Isso economiza bateria e processamento. O Chrome, por exemplo, limita a frequência com que os temporizadores repetitivos rodam em uma aba oculta, e depois que uma aba fica oculta por muito tempo, esses timers podem rodar bem menos vezes. Um contador nessa aba fica para trás, e é por isso que uma contagem regressiva que conta ticks pode terminar atrasada.

Ler o relógio em vez disso

A solução é registrar quando o timer começou e quando deve terminar. O navegador oferece um relógio de alta resolução, o performance.now(), feito para medir intervalos. Quando a tela é atualizada, o timer calcula o tempo restante como horário de término menos o horário atual. Uma atualização atrasada mostra por um instante um número levemente defasado, mas a próxima atualização corrige isso, porque o cálculo não depende de quantos ticks aconteceram. O cronômetro online deste site funciona dessa forma.

Ao pausar, o tempo restante é guardado. Ao retomar, um novo horário de término é definido como o horário atual mais o tempo restante, então a pausa não afeta a contagem.

A página também define um timer para o momento em que a contagem regressiva deve terminar. O alerta, assim, não fica esperando a próxima atualização da tela, mesmo que a tela esteja atrasada.

Por que o visor arredonda para cima

Uma contagem regressiva mostra o tempo restante arredondado para o próximo segundo inteiro. Um timer de três segundos mostra 00:03 no início, 00:02 e 00:01 enquanto roda, e 00:00 quando termina. Arredondar para baixo mostraria 00:00 durante o último segundo, o que dá a sensação de que ele acabou um segundo antes. Um timer de cozinha funciona do mesmo jeito.

Som e tela

O sinal sonoro é gerado pelo sistema de áudio do navegador, então nenhum arquivo de áudio é baixado. Os navegadores só permitem som depois de uma ação do usuário na página, por isso o áudio é preparado quando você aperta Iniciar. As configurações de volume e de mudo do seu dispositivo continuam valendo.

O bloqueio de tela é opcional. Onde o navegador oferece suporte, a página pode pedir ao dispositivo que mantenha a tela ligada enquanto o timer roda. O navegador libera esse bloqueio quando a aba fica oculta, então a página pede de novo quando você volta.

O que uma volta do cronômetro mede

Um cronômetro soma os trechos de tempo em que esteve correndo, e pausar interrompe essa soma. O total é o tempo desde o início, e uma volta é a diferença no total desde a volta anterior. O tempo da volta 1 é igual ao primeiro total. O tempo da volta 2 é igual ao segundo total menos o primeiro. O visor mostra centésimos de segundo, mas a precisão é limitada pelo dispositivo e pelo navegador, então trate o último dígito como aproximado. Para horários de turno em vez de cronômetro, a calculadora de horas faz as contas a partir dos horários, como explicado em horas trabalhadas em turnos noturnos.

Verificações práticas

• Teste um timer curto com um relógio de pulso antes de confiar nele para cozinhar ou treinar. Um teste de 30 segundos já basta para ver se o dispositivo se comporta bem.
• Deixe o volume alto e confira se o dispositivo não está no modo silencioso.
• Um timer mantém o tempo certo enquanto a aba está oculta, mas fechar a aba ou recarregar a página o zera.
• Se o notebook entrar em suspensão durante uma contagem regressiva, confira o tempo restante ao acordá-lo, porque o comportamento durante a suspensão depende do dispositivo e do navegador.

Como fazer no fixmint

1. Escolha Timer e depois toque em uma predefinição, como 5 min, ou digite Horas, Minutos e Segundos.
2. Toque em Iniciar. Você pode trocar de aba, e o tempo continua certo. Recarregar a página zera o timer.
3. Marque Manter a tela ligada enquanto estiver rodando se o seu navegador oferecer essa opção.
4. Para voltas, escolha Cronômetro, toque em Iniciar e depois em Volta a cada parcial.
5. Faça um teste de 30 segundos com um relógio antes de confiar no timer para cozinhar ou treinar.

Casos especiais

• Mudança de horário. Uma contagem regressiva mede o tempo decorrido, não o relógio de parede, então as mudanças de horário de verão não a afetam.
• Timers longos. Um timer de várias horas continua preciso, mas confira se o dispositivo não entrou em suspensão nesse intervalo.
• Mais de um timer. Cada timer mantém o seu próprio horário de término, então dois timers em duas abas não interferem um no outro.

Respostas rápidas

Por que um timer atrasa em uma aba em segundo plano? Os navegadores desaceleram timers repetitivos em abas ocultas, então um timer que conta ticks fica para trás. Um timer que lê o relógio não fica.

O timer estará certo quando eu voltar para a aba? Sim. Ele mostra o tempo restante a partir do horário de término salvo.

Qual é a diferença entre volta e total? A volta é o tempo desde a volta anterior. O total é o tempo desde que o cronômetro começou.