Timer de Contagem Regressiva

Um temporizador de contagem regressiva começa em uma duração escolhida e desce até zero. Ele é útil para trabalho focado, cozinha, intervalos de exercício, aulas, reuniões, apresentações e qualquer tarefa em que respeitar um bloco de tempo seja mais importante do que olhar o relógio atual. Diferente de um cronômetro, que mede o tempo decorrido a partir de zero, a contagem regressiva mostra quanto falta e quando a atividade deve terminar. Isso ajuda a controlar o ritmo, encerrar no momento certo e evitar atrasos. Esta página também inclui cronômetro e vários temporizadores, servindo para voltas, etapas e tarefas paralelas. Como tudo roda na aba aberta do navegador, mantenha a página ativa quando o alerta for importante.

O motor de contagem regressiva não usa setInterval(callback, 1000) como relógio autoritativo - essa abordagem acumula desvio porque a especificação do event-loop do HTML5 só garante um atraso mínimo, não uma cadência fixa. Em vez disso, a página registra um startTime via Date.now() (ou performance.now() para resolução submilissegundo) e em cada tick calcula remaining = targetDuration - (Date.now() - startTime). A atualização visual é conduzida por requestAnimationFrame, que é limitado pelo navegador à taxa de vsync do display (tipicamente 60 Hz / 16,67 ms, às vezes 120 Hz em laptops e celulares de alta taxa de atualização). Esse design autocorretivo mantém os segundos exibidos alinhados com o relógio real mesmo após a fila de tarefas do JavaScript parar para coleta de lixo ou um layout longo. A limitação em segundo plano é a principal fonte de surpresas com temporizadores. De acordo com o HTML Living Standard, abas ocultas limitam setInterval/setTimeout a um mínimo de 1000 ms (Chrome, Firefox e Safari implementam isso com suas próprias heurísticas; o Chrome adicionalmente congela abas inativas após cerca de 5 minutos em bateria). A Page Visibility API (document.visibilityState, document.hidden, o evento visibilitychange) permite que o temporizador detecte uma troca de aba e reconcile seu relógio interno com Date.now() quando a aba volta a ficar visível. O som de fim de contagem é reproduzido pela Web Audio API (AudioContext + OscillatorNode ou um AudioBuffer pré-carregado), que requer ativação prévia por gesto do usuário no iOS Safari e no Chrome moderno para satisfazer a política de autoplay. Um alerta visual de melhor esforço também é renderizado e, se o usuário tiver concedido permissão anteriormente, um toast em nível do sistema operacional pode ser exibido através da Notification API. O modo multi-timer mantém cada temporizador em seu próprio objeto de estado com um startTime independente; um único loop de requestAnimationFrame itera sobre o array a cada quadro em vez de girar um intervalo separado por temporizador, o que mantém o trabalho de CPU constante conforme o número cresce. A persistência entre recarregamentos usa localStorage com um endTime serializado, para que a página possa recomputar o tempo restante ao montar. Esteja ciente de que correções de relógio pelo sistema operacional (alteração manual de hora, salto NTP ou transição de horário de verão) deslocam Date.now() instantaneamente e podem fazer um temporizador recuperado parecer saltar - performance.now() é monotônico e é preferido quando apenas o tempo decorrido importa dentro de uma única carga de página.

• Use Date.now() ou performance.now() como fonte de verdade; nunca confie em ticks acumulados de setInterval.
• requestAnimationFrame limita a repintura à vsync do display (60 Hz = ~16,67 ms; 120 Hz = ~8,33 ms).
• Abas ocultas limitam setInterval a um mínimo de 1000 ms conforme a especificação HTML; o Chrome pode congelar a página após ~5 min em bateria.
• A Page Visibility API (evento visibilitychange) é o gancho para reconciliar o temporizador quando a aba volta ao primeiro plano.
• A Web Audio API requer ativação prévia por gesto do usuário no iOS Safari e Chrome para satisfazer a política de autoplay.
• A Notification API requer Notification.requestPermission() e um contexto seguro (HTTPS ou localhost).
• performance.now() é monotônico entre saltos NTP e mudanças de horário de verão; Date.now() não é - escolha adequadamente.