3.1 Callback en Jquery.

Para asegurarnos de que un método de Jquery se ejecute inmediatamente después de que otro se termine de ejecutar, podemos realizar lo que se conoce como callback, un callback es la función que se ejecuta después del término de la ejecución de un  método determinado.El formato de los callbacks es el siguiente:

$(elemento).metodoJquery(parámetros,funcion callback);

• Elemento se refiere al elemento HTML al que se esta haciendo referencia.
• metodoJquery se refiere al método Jquery que se este ejecutando, es decir, fadeOut(),fadeIn(),css(),attr() u otros.
• Parámetros se refiere a la información que se le pasa al método como por ejemplo los milisegundos en el caso del método fadeIn() o fadeOut(), o bien, el texto, en el caso del método text().
• Función callback se refiere a la función del tipo function(){} que se ejecutará inmediatamente después de que se termina la ejecución del método que la contiene.

 

Para poder entender un poco mejor los callbacks, supongamos que deseamos que a una determinada capa o div con la clase “capa” se le apliquen los siguientes efectos: primero se desaparece la capa con un fadeOut(), luego se cambia el texto de la capa con text() y finalmente vuelve a aparecer la capa usando fadeIn().Usando Jquery el código quedaría como se muestra a continuación:

$(document).ready(function(){
$(“.capa”).fadeOut(1000,function(){
          $(“.capa”).text(“”).text(“Este texto se añade a la capa…”).fadeIn(1000);
        });
});

El código Jquery consiste de los siguientes componentes:

• La primera parte $(document).ready(function(){}); indica que el código se ejecutapra una vez que el HTML se haya cargado completamente.
• La segunda parte $(“.capa”).fadeOut(1000,function(){}) indica que la capa con la clase “capa” se ocultara usando el método fadeOut() y hay dos parámetros, el primero es la cantidad de milisegundos que durará el efecto y el segundo la función callback, es decir la función que se ejecutará inmediatamente después de que se termine de ejecutar el método que la contiene.
• La última parte $(“.capa”).text(“”).text(“Este texto se añade a la capa…”).fadeIn(1000); pues se encarga de cambiar el texto del div mediante el método text() y de mostrar la capa nuevamente usando fadeIn().