Como desarrollador de JavaScript, puede pasar la mayor parte de su tiempo desarrollando aplicaciones y programas sincrónicos. Algunas operaciones específicas solo pueden comenzar cuando las anteriores están terminadas en este tipo de aplicaciones. Sin embargo, cuando los datos se solicitan desde una fuente externa, como una API externa, a menudo no tenemos idea de cuándo se devolverán los datos requeridos.

En tales casos, debe esperar la respuesta, pero al mismo tiempo, no desea que su aplicación esté en estado de alto mientras se obtienen los datos. Con la atención Funciones de devolución de llamada son útiles en esta situación.

Este artículo explicará las funciones de devolución de llamada en jQuery con la ayuda de ejemplos apropiados. Entonces, comencemos!

Funciones de devolución de llamada en jQuery

Las declaraciones agregadas en un programa JavaScript se ejecutan secuencialmente. Pero, cuando utiliza un efecto en jQuery, lleva tiempo realizar su funcionalidad; Mientras tanto, el código agregado en las siguientes líneas se ejecutará. Para evitar esta situación, JQuery ofrece una función de devolución de llamada para cada método de efecto jQuery.

Una función de devolución de llamada es un tipo de función jQuery que se ejecuta cuando el método de efectos adicionales termina su operación. Esta función se pasa como un último argumento en el método de efecto jQuery específico.

Ahora, mire la sintaxis de la función de devolución de llamada en jQuery.

Sintaxis de las funciones de devolución de llamada jQuery

$ (selector).Effect_Function (velocidad, devolución de llamada);

En "selector", Puede agregar un selector de jQuery para seleccionar los elementos HTML requeridos y el"Effect_Function ()"Es un método de efecto jQuery en el que debes aprobar un argumento para"velocidad" y "llamar de vuelta" función.

Ejemplo 1: Uso de funciones de devolución de llamada en jQuery

En primer lugar, agregaremos un "Esconder párrafo"Botón y un párrafo en nuestro"índice.html" archivo:

Esconder párrafo

Este es un párrafo con texto de muestra.

En el siguiente paso, avanzaremos hacia nuestro archivo JavaScript "mi proyecto.js"Y escriba el siguiente código en él:

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").ocultar ("lento", function ()
alerta ("El párrafo ahora está oculto");
);
);
);

Ahora, cuando el usuario hace clic en el "Esconder párrafo"Botón, el selector de nombre del elemento jQuery"$ ("P")"Encontrará y obtendrá el"pag"O elemento de párrafo y luego esconderlo lentamente de la página web. Después de hacerlo, la devolución de llamada "función()Se ejecutará y se muestra un cuadro de alerta en el navegador:

Aquí hay un GIF que demuestra la salida de nuestro programa JavaScript:

En caso de que desee verificar cómo funcionará el mismo programa sin una función de devolución de llamada jQuery, luego agregue el código dado a continuación en su archivo JavaScript:

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").escondite (1000);
alerta ("El párrafo ahora está oculto");
);
);

Sin agregar una función de devolución de llamada, el intérprete JavaScript funcionará de la siguiente manera:

Ejemplo 2: Uso de funciones de devolución de llamada en jQuery

En este ejemplo, agregaremos una función de devolución de llamada para "deslizamiento"Efecto jQuery. Antes de eso, agregaremos un párrafo y un "Haz click en mi" botón:

Este es un párrafo de muestra.

Haz click en mi

Después de eso, escribiremos el siguiente código en nuestro "mi proyecto.js" archivo:

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").slidEtoggle ("lento", function ()
alerta ("El efecto de alternancia de diapositivas ahora se completa.");
);
);
);

El código dado anterior especifica que hacer clic en el botón se deslizará lentamente hacia abajo en el "pag" elemento. Cuando esto "slidetoggle ()"Finaliza el efecto, la función de devolución de llamada se ejecutará y aparecerá un cuadro de alerta en la página web que indica que"El efecto de alternancia de diapositivas ahora se completa":

Consulte la salida del programa proporcionado:

Ahora, en el mismo "índice.html"Archivo, agregaremos un encabezado con el"

" etiqueta:

Esto se dirige

A continuación, el selector de nombre del elemento $ ("H1, P") En el archivo JavaScript encontrará y obtendrá el H1 y pag elementos. Entonces, el párrafo se deslizará hacia abajo con "lentoLa velocidad y el encabezado se mostrarán en su posición. Por último, la función de devolución de llamada mostrará el cuadro de alerta en el navegador:

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("H1, P").slidEtoggle ("lento", function ()
alerta ("El efecto de alternancia de diapositivas se ha completado.");
);
);
);

Ahora, el cuadro de alerta aparecerá dos veces en la página web, una para el "H1"Encabezando y el otro para el"pag"Elemento de párrafo:

Como puede ver en la salida anterior, hemos implementado correctamente la función de devolución de llamada en jQuery.

Conclusión

La función de devolución de llamada en jQuery es una función que se ejecuta cuando el método de efecto agregado ha terminado su ejecución. En un método de efecto jQuery, la función de devolución de llamada se pasa para volver a llamar más tarde y generalmente se especifica como el último argumento. Este artículo explicó funciones de devolución de llamada en jQuery y también hemos proporcionado ejemplos apropiados relacionados con el uso de funciones de devolución de llamada.