Eu sei que os cronômetros já são um recurso que muitas pessoas usam em suas tarefas do dia a dia. No mundo JavaScript, os temporizadores são frequentemente implementados com as funções setTimeout ou setInterval. A má notícia para você, se estiver fazendo isso, é que não é uma boa prática e tentarei explicar o porquê.

Antes de começar a explicar meu pensamento, tenho uma pergunta para você:

você pode usar um relógio com a hora errada?

Se sua resposta for sim, sinto muito por ter desperdiçado seu precioso tempo porque este artigo não pertence a você.

Por outro lado, se sua resposta for negativa, explicarei por que usar setTimeout ou setInterval é como usar um relógio danificado para saber as horas.

O problema com essas funções

Para começar, vamos considerar o seguinte trecho

teste de função() { seja i = 0; setTimeout(() => console.log("olá"), 0); enquanto (eu function test() { let i = 0; setTimeout(() => console.log("hello"), 0); while (i se você executar este snippet no console do seu navegador, você terá o seguinte resultado

Este comportamento se deve ao fato de setTimeout estar adicionando o callback na fila do navegador para que ele o processe quando estiver ocioso

(não tem uma tarefa a fazer) em outras palavras o callback passado para setTimeout tem baixa prioridade

Agora, sabendo disso, imagino que será difícil para você implementar timers usando a função setTimeout porque você pode ter 2 ou até 10 ticks (dependendo de quão ocupado seu navegador está) ao mesmo tempo. Será um pesadelo depurar, mas temos uma solução melhor?

Uma maneira de evitar essas funções

Para fornecer uma maneira melhor de implementar temporizadores, devemos usar a função requestAnimationFrame porque ela diz ao navegador para executar um retorno de chamada antes da próxima pintura

(em outras palavras, antes de ocorrer qualquer alteração na IU)

A diferença aqui é bem sutil, então é melhor entendê-la por meio do código. Vamos retomar nosso trecho anterior e ajustá-lo um pouco para comparar setTimeout e requestAnimationFrame

função testWithAnimationFrame() { seja i = 0; setTimeout(() => console.log("olá"), 0); requestAnimationFrame(() => console.log("me diga a próxima pintura")); enquanto (eu function test() { let i = 0; setTimeout(() => console.log("hello"), 0); while (i Neste exemplo, podemos ver que, ao executar no Chrome, o setTimeout é executado antes de requestAnimationFrame

(embora em alguns casos raros o inverso aconteça)

Mas se você rodar no Firefox, este será o resultado

Isso pode parecer confuso, mas se você prestar um pouco de atenção, perceberá que nenhuma pintura está acontecendo durante a execução, então a forma como esse cenário é tratado depende do navegador.

Agora, se pudermos ajustar nosso snippet para fazer o navegador redesenhar a página, vamos ver o que vai acontecer

função testWithAnimationFrame2() { seja i = 0; setTimeout(() => console.log("olá"), 0); requestAnimationFrame(() => console.log("me diga a próxima pintura")); enquanto (eu function test() { let i = 0; setTimeout(() => console.log("hello"), 0); while (i Aqui está o resultado no Chrome

E aqui está a saída no Firefox

Como você pode ver nos logs, quando o navegador faz alterações na IU, a função requestAnimationFrame sempre terá prioridade sobre outros retornos de chamada agendados.

Como na web estamos constantemente realizando repinturas, requestAnimationFrame é uma escolha óbvia para implementar temporizadores.

Compreendendo a função requestAnimationFrame

A função aceita apenas um retorno de chamada como parâmetro. Para fornecer contexto ao retorno de chamada, deve ser necessário um carimbo de data/hora indicando a hora em que o quadro anterior terminou com base na hora da renderização inicial da página.

A função retornará um número inteiro representando o identificador da solicitação, isso pode ser útil se você deseja cancelar a solicitação com a função cancelAnimationFrame.

Uma implementação simples de um cronômetro em JavaScript

Para implementar um cronômetro, existem alguns requisitos:

Devemos saber após quanto tempo ele deve marcar (geralmente um segundo)
Devemos saber o intervalo de tempo após o qual o cronômetro deve parar de funcionar
Os intervalos de tique devem ser menores que o atraso

Levando em consideração todos esses requisitos, o trecho de código a seguir criará um cronômetro para você

Outro

Sei que pode ter sido uma leitura longa, mas acredito que você gostou. De qualquer forma, se você tiver alguma dúvida ou sugestão, fique à vontade para entrar em contato comigo.

Obrigado por ler e adeus?