Exibir o Cronômetro

Cartões · 50

O que é um cronômetro na programação?

É uma funcionalidade que conta e exibe o tempo decorrido a partir de um momento inicial, geralmente em milissegundos, segundos e minutos.

Diferença entre cronômetro e temporizador (timer)

O cronômetro realiza contagem progressiva a partir do zero; o temporizador faz contagem regressiva a partir de um valor pré-definido.

Unidade base recomendada para cálculos de tempo

Milissegundos, pois oferecem precisão suficiente para a maioria das interfaces e facilitam a conversão matemática.

Por que não somar 1 segundo repetidamente com setInterval?

O setInterval não é perfeitamente preciso e sofre atrasos acumulados pelo event loop e processamento de outras tarefas.

Abordagem precisa: cálculo por Date.now() ou performance.now()

Salva-se o timestamp inicial (startTime) e calcula-se o tempo decorrido subtraindo startTime do timestamp atual a cada atualização.

Fórmula do tempo decorrido

tempoDecorrido = Date.now() - tempoInicial.

Como calcular os segundos a partir de milissegundos totais?

Math.floor((msTotais / 1000) % 60).

Como calcular os minutos a partir de milissegundos totais?

Math.floor((msTotais / (1000 * 60)) % 60).

Como calcular as horas a partir de milissegundos totais?

Math.floor(msTotais / (1000 * 60 * 60)).

Como extrair os centésimos de segundo?

Math.floor((msTotais % 1000) / 10).

Função do método String.prototype.padStart()

Preencher o início da string numérica com zeros para manter o formato de dois dígitos (ex: String(5).padStart(2, '0') vira '05').

Formato clássico de exibição HH:MM:SS

Concatenação das variáveis formatadas com dois dígitos separadas por dois pontos.

Papel do setInterval na exibição do cronômetro

Executar a função de atualização de tela repetidamente em uma taxa fixa de quadros ou milissegundos.

Papel do clearInterval

Interromper a execução do setInterval, pausando ou parando a atualização visual do cronômetro.

Taxa de atualização ideal para exibir milissegundos/centésimos

Entre 10ms e 50ms, evitando sobrecarga desnecessária na CPU enquanto mantém a animação fluida.

Taxa de atualização ideal para exibir apenas HH:MM:SS

A cada 100ms a 250ms, garantindo sincronia imediata sem o delay perceptível de checar a cada 1000ms.

Como funciona a lógica de Pausar (Pause)

Para o loop com clearInterval e armazena o tempo acumulado até aquele momento para reaproveitá-lo ao retomar.

Como funciona a lógica de Retomar (Resume)

Redefine o ponto de partida ajustando o novo startTime para compensar o tempo acumulado antes da pausa.

Como funciona a lógica de Reiniciar (Reset)

Cancela o intervalo ativo, zera as variáveis de controle (startTime e acumulador) e atualiza o display para 00:00:00.

Problema de tabs em segundo plano nos navegadores

Navegadores reduzem a frequência de execução do setInterval/setTimeout em abas inativas para economizar bateria.

Solução para atrasos causados por abas em segundo plano

Usar timestamps reais (Date.now()), pois o cálculo da diferença permanece exato mesmo se a atualização visual espaçar.

Uso de requestAnimationFrame para cronômetros

Alternativa fluida ao setInterval para animações a 60 FPS, sincronizando a atualização diretamente com a taxa de quadros da tela.

Cancelamento de requestAnimationFrame

Utiliza-se cancelAnimationFrame passando o identificador retornado pela chamada anterior.

Uso de Web Workers em cronômetros

Executa a contagem em uma thread separada para evitar que abas inativas ou tarefas pesadas na thread principal causem lentidão.

Fontes monoespaçadas (monospace) na interface

Evitam que o texto do cronômetro trema ou mude de largura na tela quando dígitos de larguras diferentes mudam.

Propriedade CSS font-variant-numeric: tabular-nums

Força dígitos com largura idêntica em fontes comuns, impedindo oscilação horizontal durante a contagem.

Evitar manipulação excessiva do DOM

Atualizar apenas o elemento de texto que realmente mudou para reduzir o custo de renderização do navegador.

Como armazenar voltas (Lap Time)

Salva o valor atual do tempo decorrido em um array de registros e opcionalmente calcula a diferença da volta anterior.

Diferença entre tempo total e tempo da volta (split time)

Tempo total é o tempo desde o início; tempo da volta é o intervalo entre a marcação anterior e a atual.

Implementação no React: estado vs ref para ID do intervalo

Armazena-se o ID do intervalo em um useRef para evitar renderizações desnecessárias ao guardar a referência.

Implementação no React: useEffect com limpeza (cleanup)

Retornar a função clearInterval dentro do useEffect para evitar vazamentos de memória ao desmontar o componente.

Implementação no React: estado do tempo decorrido

Geralmente salvo em useState como milissegundos inteiros, disparando a re-renderização do display a cada tick.

Implementação no Vue: ref e onUnmounted

Armazena o tempo em ref reativo e limpa o timer no hook onUnmounted para prevenir vazamento de memória.

Implementação pura no DOM: textContent vs innerHTML

Prefira element.textContent por ser muito mais rápido e seguro que innerHTML para atualizar texto puro continuamente.

Persistência do cronômetro com localStorage

Salva-se o startTime e o estado (rodando/pausado) para recuperar a contagem exata ao recarregar a página.

Acessibilidade: aria-live em cronômetros

Usar com cautela; valores como 'polite' a cada segundo podem poluir leitores de tela. Notifique apenas eventos chave.

Uso da tag semântica <time> no HTML

Permite definir o horário em formato legível por máquinas com o atributo datetime (ex: datetime='PT1M30S').

Diferença entre Date.now() e performance.now()

Date.now() é baseado no relógio do sistema; performance.now() tem precisão de microssegundos e é monotônico.

O que significa um relógio monotônico?

Um relógio que nunca retrocede, imune a alterações manuais de horário do sistema operacional pelo usuário.

Tratamento de overflow de horas

Para cronômetros longos, exibir mais de dois dígitos de hora (ex: 100:00:00) quando ultrapassar 99 horas.

Desativação de botões por estado

Desabilitar o botão Iniciar enquanto o cronômetro estiver rodando para evitar criação de múltiplos intervalos paralelos.

Bug comum: múltiplos cliques em Iniciar

Sem validação, cada clique cria um setInterval concorrente, acelerando a contagem e perdendo referências de limpeza.

Estrutura do objeto de estado de um cronômetro

Geralmente contém: status ('idle', 'running', 'paused'), startTime, elapsedTime e laps.

Formatação modular de strings de tempo

Criar uma função utilitária pura formatTime(ms) que recebe milissegundos e retorna a string pronta para exibição.

Padronização ISO 8601 de duração

Formato padrão para durações de tempo representado por PnDTnHnMnS (exemplo: PT15M33S).

Controle de visibilidade da página via Visibility API

Detectar document.hidden para forçar uma re-renderização imediata com o tempo exato assim que o usuário volta à aba.

Uso de canvas para renderização de cronômetro

Indicado para designs complexos, gráficos circulares de progresso ou quando o layout requer alta performance gráfica.

Indicador visual de progresso circular (radial progress)

Calcula-se o percentual do segundo atual (ex: (ms % 1000) / 1000) e aplica-se no stroke-dashoffset de um SVG.

Validação de limites no temporizador regressivo

Garantir que a contagem pare exatamente em 0ms (Math.max(0, restante)) para nunca exibir valores negativos.

Som de conclusão ou alarme

Executar um elemento Audio HTML5 ou Web Audio API quando a contagem atingir zero ou um tempo alvo pré-definido.