Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Funcoes dentro

Estava relendo o código para estudar, achei uma duvida sobre funções dentro do evento .click() ou na requisição .get(), entre outros, as funções perdem o entre parênteses. Queria saber o por que disso.

5 respostas

Fala ai Willian, tudo bem? Teria algum exemplo de código? Assim ficaria mais fácil entender e te explicar.

Tente adicionar um trecho de código.

Fico no aguardo.

Como esse código aqui por exemplo, a primeira linha do click esta recebendo a "fraseAleatoria", mas sem estar entre parênteses , respectivamente a requisição GET esta chamando uma funcao "trocaFraseAleatoria" sem os parênteses :

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria() {
    $("#spinner").toggle();
    $.get("http://localhost:3000/frases",trocaFraseAleatoria).fail(function () {
        $("#erro").toggle();
        setTimeout(function () {
            $("#erro").toggle();
        },2000);
    }).always(function () {
        $("#spinner").toggle();
    });
}

Fala ai Willian, vamos lá:

A função .click do jQuery espera receber uma função de callback que será executada quando um evento de click for disparado no botão com o id botao-frase.

Ao passar apenas o nome da função sem os parênteses:

$("#botao-frase").click(fraseAleatoria);

Estamos passando a referência da função fraseAleatoria para a função click. Porém, se a gente passar com os parênteses:

$("#botao-frase").click(fraseAleatoria());

A função fraseAleatoria iria ser executada primeiro e o seu retorno seria passado para a função click.

Também poderíamos criar uma função anônima direto no .click:

$("#botao-frase").click(function() {
    $("#spinner").toggle();
    $.get("http://localhost:3000/frases",trocaFraseAleatoria).fail(function () {
        $("#erro").toggle();
        setTimeout(function () {
            $("#erro").toggle();
        },2000);
    }).always(function () {
        $("#spinner").toggle();
    });
});

Ambos códigos são equivalentes.

Espero ter ajudado.

E nessa situação onde os parâmetros para a função trocaFraseAleatoria é a data, a requisição GET chama a instância mas não passa nenhum parâmetro. Como o JQuery consegue receber o parâmetro sem ter passado?

function fraseAleatoria() {
    $("#spinner").toggle();
    $.get("http://localhost:3000/frases",trocaFraseAleatoria).fail(function () {
        $("#erro").toggle();
        setTimeout(function () {
            $("#erro").toggle();
        },2000);
    }).always(function () {
        $("#spinner").toggle();
    });
}

function trocaFraseAleatoria(data) {
    var frase = $(".frase");
    var numeroAleatorio = Math.floor(Math.random() * data.length);

    frase.text(data[numeroAleatorio].texto);
    //console.log(numeroAleatorio);

    atualizaTamanhoFrase();
    atualizaTempoInicial(data[numeroAleatorio].tempo);
}
solução!

Fala ai Willian, o funcionamento é mesmo, quando referenciamos uma função através de variável ou parâmetro, podemos chamá-la com ou sem parâmetro:

function ola(nome) {
    console.log('Olá', nome);
}

Essa é uma função chamada ola que recebe um nome e apenas imprimi no console Olá NOME.

Podemos chamá-la diretamente:

ola('Matheus')

Ou referenciar ela em uma variável e depois chamá-la:

var minhaFuncaoDeBoasVindas = ola
minhaFuncaoDeBoasVindas('Matheus')

O resultado será o mesmo em ambos os casos.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software