Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Lógica para mudar o comportamento do cronômetro

Referente ao curso React: escrevendo com Typescript

por Daniel Lima Correia
| 179.2k xp | 36 posts

Olá,

Conforme o código que estamos fazendo na aula, quando rodamos o cronômetro ele decresce até o "0" segundos, mas o item só é marcado como completado 1 segundo depois disso, quando o setTimeout roda o intervalo de 1 segundo e roda o código da função regressiva e o if avalia como falso e pula para a execução da função finalizarTarefa. Fiquei pensando em alguma forma de fazer o item ser marcado como completado junto com o cronômetro chegando a zero, mas só pensei na opção de colocar um if primeiro e testar se contador chegou a zero, assim: if(contador == 1) finalizarTarefa();

Interessante foi notar que só funcionou como eu queria se eu colocar a condição de contador == 1, se testar para igual a 0 dá no mesmo. Alguma sugestão para implementar essa lógica de outra forma? Ou melhor, será que a função setTimeout tem a opção de executar o código ANTES do intervalo informado?

2 respostas
solução!
por Luiz Fernando Ribeiro
| 119.4k xp | 128 posts
Instrutor Desenvolvedor Front-End

Fala Daniel, beleza?

Isto acontece pois decidimos de no começo da contagem ele tirar 1 segundo de primeira, então no momento que tira o segundo, é como se estivesse menos de um segundo mas os milésimos ainda contassem, por isto existe esse momento no segundo 0, para resolver este problema, é só mudar a função regressiva para isto daqui:

function regressiva(contador: number = 0) {
    if(contador === 0) return finalizarTarefa();
    setTimeout(() => {
      setTempo(contador - 1);
      return regressiva(contador - 1);
    }, 1000)
  }

Isto reverte e faz com que o segundo só seja diminuído despois de 1 segundo, e caso seja 0 pare imediatamente!

por Daniel Lima Correia
| 179.2k xp | 36 posts

Olá, Luiz!

Obrigado pela explicação. Confesso que o texto me confundiu um pouco, mas achei o código final bem simples e faz exatamente o que eu queria. Parabéns pelo curso, muito bom!