finalizaJogo ocorre em todos segs do inicializaCronometro | jQuery: domine a biblioteca mais popular do mercado parte 1

Oi !

Gente não consigo encontrar o motivo de isso estar acontecendo..

Quando entro no campo de digitação para iniciar o jogo, ele executa o inicializaCronometro, mas durante todos os segundos disponíveis, ele executa a função finalizaJogo, que está dentro do if (tempoRestante < 1).

Também, em cada segundo que passa, ele cria uma linha no ranking. Coloquei um console.log na função inserePlacar, e ela é executada desde o início.

console.log("O arquivo javascript main.js foi carregado");

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");

//atalho para: $(document).ready(function(){})
$(function(){
  atualizaTamanhoFrase();
  inicializaContadores();
  inicializaCronometro();
  inicializaMarcadores();
  //atalho para: (...).on("click", function(){})
  $("#botao-reiniciar").click(reiniciaJogo);
})

function atualizaTamanhoFrase(){
  var frase = $(".frase").text();
  var numPalavras = frase.split(" ").length;
  var tamanhoFrase = $("#tamanho-frase");
  tamanhoFrase.text(numPalavras);
}

function inicializaContadores(){
  campo.on("input", function(){
    var conteudo = campo.val();

    var qtdPalavras = conteudo.split(/\S+/).length -1;
    $("#contador-palavras").text(qtdPalavras);

    var qtdCaracteres = conteudo.length;
    $("#contador-caracteres").text(qtdCaracteres);
  });
}

function inicializaMarcadores(){

  var frase = $(".frase").text();

  campo.on("input", function(){
    var digitado = campo.val();
    var comparavel = frase.substr(0, digitado.length);

    if(digitado == comparavel){
      campo.addClass("borda-verde");
      campo.removeClass("borda-vermelha")
    } else{
      campo.addClass("borda-vermelha");
      campo.removeClass("borda-verde");
    }
  });
}

function inicializaCronometro(){

  var tempoRestante = $("#tempo-digitacao").text();

  campo.one("focus", function() {
    var cronometroID = setInterval(function(){
      tempoRestante--;
      $("#tempo-digitacao").text(tempoRestante);
      if (tempoRestante < 1){
        clearInterval(cronometroID)};
        finalizaJogo();
    }, 1000);
  });
}

function finalizaJogo(){
  campo.attr("disabled", true)
  campo.toggleClass("campo-desativado");
  inserePlacar();
}

function inserePlacar(){
  var corpoTabela = $(".placar").find("tbody");
  var usuario = "Giovanni";
  var numPalavras = $("#contador-palavras").text();

  var linha = "<tr>"+
                "<td>"+ usuario+ "</td>"+
                "<td>"+ numPalavras+ "</td>"+
              "</tr>";

  corpoTabela.prepend(linha);

  console.log("rodou inserePlacar")
}

function reiniciaJogo(){

  campo.attr("disabled", false);
  campo.val("");
  $("#contador-palavras").text("0");
  $("#contador-caracteres").text("0");
  $("#tempo-digitacao").text(tempoInicial);
  inicializaCronometro();
  campo.removeClass("borda-vermelha");
  campo.removeClass("borda-verde");
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Typing Game</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <div class="container">
    <h1 class="center">Typing Game</h1>

    <p class="frase center">Esta frase tem cinco palavras.</p>

    <ul class="informacoes center">
      <li><i class="small material-icons icones">description</i><span id="tamanho-frase">5</span> Palavras</li>
      <li><i class="small material-icons icones">query_builder</i><span id="tempo-digitacao">5</span> Segundos</li>
    </ul>

    <textarea class="campo-digitacao" rows="8" cols="40"></textarea>

    <div class="botoes">
      <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar"><i class="material-icons">restore</i></a>
    </div>

    <ul class="center">
      <li><span id="contador-caracteres">0</span> Caracteres</li>
      <li><span id="contador-palavras">0</span> Palavras</li>
    </ul>

    <section class="placar">
      <h3 class="center">Placar</h3>
      <table class="centered bordered">
        <thead>
          <tr>
            <th>Nome</th>
            <th>No. De Palavras</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Giovanni</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </section>

  </div>

  <script src="js\jquery.js"></script>
  <script src="js\main.js"></script>

</body>
</html>

Agradeço qualquer ajuda disponibilizada!

abç

Mergulhe em programação