Como desenvolvedor de JavaScript, você pode gastar a maior parte do seu tempo desenvolvendo aplicativos e programas síncronos. Algumas operações específicas só podem começar quando as anteriores terminarem nesses tipos de aplicações. No entanto, quando os dados são solicitados de uma fonte externa como uma API externa, geralmente não temos idéia quando os dados necessários serão retornados.

Nesses casos, você deve esperar a resposta, mas, ao mesmo tempo, você não deseja que seu aplicativo esteja em um estado de parada enquanto os dados são buscados. Adicionando Funções de retorno de chamada são úteis nesta situação.

Este artigo explicará as funções de retorno de chamada em jQuery com a ajuda de exemplos apropriados. Então vamos começar!

Funções de retorno de chamada em jQuery

As declarações adicionadas em um programa JavaScript são executadas sequencialmente. Mas, quando você utiliza um efeito no jQuery, leva tempo para executar sua funcionalidade; Enquanto isso, o código adicionado nas próximas linhas será executado. Para evitar essa situação, o jQuery oferece uma função de retorno de chamada para cada método de efeito jQuery.

Uma função de retorno de chamada é um tipo de função jQuery que é executada quando o método de efeitos adicionados termina sua operação. Esta função é passada como um último argumento no método específico de efeito jQuery.

Agora, veja a sintaxe da função de retorno de chamada em jQuery.

Sintaxe das funções de retorno de chamada jQuery

$ (seletor).efet_function (velocidade, retorno de chamada);

Em "Seletor“, Você pode adicionar um seletor de jQuery para selecionar os elementos HTML necessários e o“efet_function ()”É um método de efeito jQuery no qual você precisa aprovar um argumento para“velocidade" e "ligar de volta”Função.

Exemplo 1: Usando funções de retorno de chamada no jQuery

Primeiro de tudo, vamos adicionar um “Ocultar o parágrafo”Botão e um parágrafo em nosso“índice.html" arquivo:

Ocultar o parágrafo

Este é um parágrafo com texto de amostra.

Na próxima etapa, avançaremos em direção ao nosso arquivo JavaScript “meu projeto.JS”E escreva o seguinte código nele:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").ocultar ("lento", function ()
alerta ("o parágrafo está agora oculto");
);
);
);

Agora, quando o usuário clica no “Ocultar o parágrafo”Botão, o seletor de nome do elemento jQuery“$ ("P")”Será que encontrará e obterá o“p”Ou elemento de parágrafo e depois esconda -o lentamente na página da web. Depois de fazer isso, o retorno de chamada “função()”Será executado e exibe uma caixa de alerta no navegador:

Aqui está um GIF que demonstra a saída do nosso programa JavaScript:

Caso você queira verificar como o mesmo programa funcionará sem uma função de retorno de chamada jQuery e adicione o código abaixo no seu arquivo JavaScript:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").ocultar (1000);
alerta ("o parágrafo está agora oculto");
);
);

Sem adicionar uma função de retorno de chamada, o intérprete JavaScript operará da seguinte maneira:

Exemplo 2: Usando funções de retorno de chamada no jQuery

Neste exemplo, adicionaremos uma função de retorno de chamada para “slideToggle”Efeito da JQuery. Antes disso, adicionaremos um parágrafo e um “Clique em mim" botão:

Este é um parágrafo de amostra.

Clique em mim

Depois disso, escreveremos o seguinte código em nosso “meu projeto.JS" arquivo:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").slidetoggle ("lento", function ()
alerta ("O efeito de alternância do slide está agora concluído.");
);
);
);

O código acima é específico especifica que clicar no botão deslizará lentamente o “p" elemento. Quando isso "slideToggle ()”Effect Acabes, a função de retorno de chamada será executada e uma caixa de alerta aparecerá na página da web, afirmando que“O efeito de alternância do slide agora está concluído”:

Confira a saída do programa fornecido:

Agora, no mesmoíndice.html”Arquivo, adicionaremos um título com o“

" marcação:

Isso está indo

Em seguida, o seletor de nome do elemento $ ("H1, P") no arquivo JavaScript encontrará e obterá o H1 e p elementos. Então, o parágrafo será deslizado para baixo com “lento”A velocidade e o título serão mostrados em sua posição. Por fim, a função de retorno de chamada exibirá a caixa de alerta no navegador:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("H1, P").slidetoggle ("lento", function ()
alerta ("o efeito de alternância do slide foi concluído.");
);
);
);

Agora, a caixa de alerta aparecerá duas vezes na página da web, uma para o “H1"Caminhando e o outro para o"p”Elemento de parágrafo:

Como você pode ver na saída acima, implementamos com sucesso a função de retorno de chamada no jQuery.

Conclusão

A função de retorno de chamada no jQuery é uma função que é executada quando o método de efeito adicionado terminou sua execução. Em um método de efeito jQuery, a função de retorno de chamada é passada para ser chamada de volta mais tarde e geralmente é especificada como o último argumento. Este artigo explicou funções de retorno de chamada no jQuery e também fornecemos exemplos apropriados relacionados ao uso de funções de retorno de chamada.