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

Spinner não saí após o carregamento da frase

Referente ao curso jQuery: avance na biblioteca mais popular do mercado parte 2, no capítulo Enviando dados com AJAX e atividade Buscando dados com get

por IAGO OLIVEIRA NASCIMENTO
| 108.2k xp | 11 posts

Creio que fiz tudo certo, porém, quando busco a frase pelo ID, após a frase ser mudada, o spinner não sai da tela.

$("#botao-frase").on("click", fraseAleatoria);
$("#botao-buscar").on("click", buscaFrase);

function fraseAleatoria(){
    $("#spinner").show()

    $.get("http://localhost:3000/frases" , trocaFrase)
    .fail(function()                                                    
        $("#erro").show();      

        setTimeout(function(){                                          
            $("#erro").toggle();                                  
        }, 2000);

    }).always(function(){

        $("#spinner").toggle();

    })
}
function trocaFrase(data){
        var numAleatorio = Math.floor(Math.random() * data.length );
        var textoAleatorio = data[numAleatorio].texto;
        $(".frase").text(textoAleatorio);
        frase();
        atualizaTempo(data[numAleatorio].tempo);
        console.log(data);
}

function buscaFrase(){
    $("#spinner").show();
    var fraseId = $("#campo-busca").val();
    var dados = {id : fraseId};

    $.get("http://localhost:3000/frases", dados, mudarFrase )//um objeto é mandado para busca 
    .fail(function(){
        $("#erro").show();      

        setTimeout(function(){                                          
            $("#erro").toggle();                                  
        }, 2000);
    }).always(function(){
        $("#spinner").toggle();
    })
}

function mudarFrase(data){ que busca um objeto por id
    var frase = $(".frase");
    frase.text(data.texto);

    frase();
    atualizaTempo(data.tempo);
}
4 respostas
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá Iago, tudo bem com você?

Então, o problema está na sua função mudarFrase(data), você está invocando algo que não é uma função, veja:

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

Dessa forma temos um problema com o fluxo de execução com o nosso código, e o spinner fica eternamente na tela, para corrigir é bem simples, basta trocar o frase() pela função correta, no caso da aula:

atualizaTamanhoFrase()

Abraços e Bons Estudos!

por IAGO OLIVEIRA NASCIMENTO
| 108.2k xp | 11 posts

Ola Geovani, tudo bem sim e obrigado pela resposta. Acontece que "frase();" é uma função que eu criei, equivalente a "atualizaTamanhoFrase()", só que com nome diferente. Segue o código dela: 

function frase(){
    var frase = $(".frase").text(); 
    var numPalavras = frase.split(" ").length; 
    $("#tamanho-frase").text(numPalavras);
}
solução!
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Então Iago,

Eu imaginei isso mesmo, mas veja que dessa forma temos um conflito porque o interpretador do javascript não consegue identificar que frase() é a função que você criou, ele está lendo como se fosse o elemento que você acabou de selecionar do HTML

Para obter o resultado esperado, poderíamos mudar o nome dessa variável na função mudaFrase()

    var frase = $(".frase");

>> para por exemplo:

var fraseSelecionada = $(".frase");

Entretanto, o melhor seria mudar o nome da função, quando estamos programando uma boa prática é sempre dar nomes explícitos do que a função faz, ainda que fiquem grandes, por exemplo:

  • Eu não olhei o código do instrutor totalmente mas sei que a função atualizaTamanhoFrase de alguma maneira consegue atualizar os campos do jogo

  • Quando eu leio uma função chamada frase eu preciso ler tudo que está dentro dela para ter uma ideia do que está acontecendo

Observe que na função frase eu tenho uma variável chamada frase, isso deixa o nosso código bastante confuso, e principalmente cria esses erros porque a função acaba tendo um nome que sempre vamos querer dar para a variável

E isso nunca é bom :)

Abraços e Bons Estudos!

por IAGO OLIVEIRA NASCIMENTO
| 108.2k xp | 11 posts

Muito obrigado mesmo pelas dicas!! Mudei o nome da frase e funcionou, nunca imaginaria que isso seria a causa do problema, além das dicas de boas práticas! Obrigado!