Função perdida no script (?)

``Sempre passo no fórum para ver as dúvidas dos colegas como forma de acrescentar algo que não percebi. Existe uma dúvida no fórum de um colega de curso, na qual ele questiona o por quê de chamar a função reiniciaJogo duas vezes.

Segue o texto literal com a dúvida dele: "Não entendo pq o trecho

$("#botao-reiniciar").click(reiniciaJogo);

aparece duas vezes. Uma seria dentro da função principal do jQuery e outra vez fora da função principal do jQuery.

Testei removendo o trecho que aparece fora da função principal e vi que há uma diferença no funcionamento do cronometro, mas não entendo o pq. "

Segue também a resposta de um outro colega para a dúvida acima:

" essa linha fora da função de inicialização abstraída pelo jQuery $(function), não precisaria existir, inclusive ela pode vir a causa algum erro.

Quando utilizados o $(function) com jQuery, essa função so sera chamada quando o Browser terminar de carregar o site, assim todos os elementos já vão existir, assim será possivel registrar eventos a eles. Quando jogamos esse registro no corpo no javascript ele é executado assim que o script é carregado, podendo ter ou não carregado os elementos do HTML, assim podendo não associar o evento como deveria. "

Porém, eu fiz o teste eu o botão não reage sem essa função aí "perdida" no meio do script. Ou seja, ela é necessária. Por quê?``

var campo = $(".campo-digitacao"); //selecionando o textarea
var tempoInicial = $("#tempo-digitacao").text(); //selecionando o span de tempo e extraindo o seu conteúdo de texto



$(function() {
  atualizaTamanhoFrase();
  inicializaContadores();
  inicializaCronometro();
  $("botao-reiniciar").click(reiniciaJogo);
});

//Funções
function atualizaTamanhoFrase() {

  var frase = $(".frase").text(); //acessando o elemento o conteúdo do parágrafo
  var numPalavras = frase.split(" ").length; // separando as palavras da frase a cada espaço. / retorna um array
  var tamanhoFrase = $("#tamanho-frase"); //selecionando o elemento span
  tamanhoFrase.text(numPalavras); //alterando o conteúdo do elemento span com o retorno da função split

}

function inicializaContadores() {

  campo.on("input", function() {
    var conteudo = campo.val(); //recuperando o valor do textarea

    var qtdPalavras = conteudo.split(/\S+/).length - 1; //contando a quantidade de palavras
    $("#contador-palavras").text(qtdPalavras); //alterando o conteúdo do elemento span palavras

    var qtdCaracteres = conteudo.length; //contando os caracteres
    $("#contador-caracteres").text(qtdCaracteres); //alterando o conteúdo do elemento span caracteres

  }); //escutando um evento de input
}

function inicializaCronometro() {
  var tempoRestante = $("#tempo-digitacao").text(); // selecionando o span e extraindo o seu conteúdo de texto

  campo.one("focus", function() {
    var cronometroID = setInterval(function() {
      tempoRestante--;
      $("#tempo-digitacao").text(tempoRestante); //gerando a interação do decremento aqui
      if(tempoRestante < 1) {
        campo.attr("disabled", true); // desabilitando o textarea
        clearInterval(cronometroID); //interrompendo o setInterval
      }
    }, 1000); // decrementando o valor do meu span com o setInterval

  });// escutando o eventos focus no textarea, apenas 1 incidência de evento
}

$("#botao-reiniciar").click(reiniciaJogo);

function reiniciaJogo() {
  campo.attr("disabled", false); // habilitando novamente o textarea
  campo.val(""); //limpando o textarea

  $("#contador-palavras").text("0"); // zerando o contador de palavras
  $("#contador-caracteres").text("0"); // zerando o contador de caracteres

  $("#tempo-digitacao").text(tempoInicial); // reiniciando o tempo digitação

  inicializaCronometro(); //reiniciando o contador de tempo

}