Callback de funciones jQuery

  • Por
Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarán una detrás de otra.
A menudo cuando hacemos aplicaciones enriquecidas del lado del cliente con jQuery nos vemos en la necesidad de encadenar varias llamadas a funciones, para que una se ejecute detrás de otra, creando un efecto más elaborado. En este artículo veremos lo sencillo que es realizar lo que en inglés se llama "callback", es decir una función que se ejecuta después de otra.

Apilar funciones, para que se ejecuten una detrás de otra, nos servirá para hacer muchas cosas. En nuestro día a día con jQuery iremos encontrando la utilidad, pero de momento para explicar un caso en el que nos resultará imprescindible, se me ocurre que deseemos hacer una secuencia de efectos y cambios dinámicos en un elemento.

Por ejemplo imaginemos que se desea ocultar una capa con un efecto de fundido (de opaco a transparente), luego moverla a otra posición y volverla a mostrar (ya en la nueva posición) con otro efecto de fundido (en este caso de transparente a opaco). En principio podríamos pensar en hacer un código como este:

$("#micapa").fadeOut(2000);
$("#micapa").css({top: 300, left:200});
$("#micapa").fadeIn(2000);

En este caso estamos alterando las propiedades de una capa con id="micapa". Primero llamamos a fadeOut() para ocultarla con un fundido, que durará 2 segundos (véase el parámetro 2000, que son los milisegundos que durará el efecto). Luego alteramos la posición de la capa, cambiando sus atributos CSS. Para acabar la volvemos a mostrar con un fundido de otros 2000 milisegundos.

Nota: para poder entender mejor estas llamadas a efectos, por favor, consulta el artículo Efectos Rápidos con jQuery.

Si lanzamos la ejecución de estas sentencias, tal como aparece en el código, será como si se ejecutasen todas a la vez. Como los fadeOut y fadeIn tardarán 2 segundos en ejecutarse y los cambios de las propiedades CSS top y left son inmediatos, lo que ocurrirá será que primero veremos la capa moverse a la nueva posición y luego veremos los dos efectos de fundido.

Lo mejor para darse cuenta de este caso es verlo en marcha.

Cómo realizar una pila de ejecución de funciones

Ahora que ya hemos visto uno de los casos en los que necesitaríamos ejecutar funciones en una pila, una después de otra, esperando a que termine completamente la ejecución de cualquier efecto o acción antes de comenzar con la siguiente. Vamos a ver cómo hacerlo con jQuery.

Simplemente tenemos que saber que todas las funciones o métodos de jQuery pueden recibir un parámetro adicional con el nombre de la función que se tiene que ejecutar después que termine el procesamiento de la primera. Esa segunda función que se ejecuta después de la primera es la que se conoce en inglés por callback. Un ejemplo sencillo para entenderlo.

miFuncion ("parametros de la función", funcionCallback);

En ese esquema de llamada a miFuncion(), se le están pasando dos parámetros. El primero sería un supuesto parámetro que necesitase miFuncion() y el segundo, que es le que nos interesa en este caso, el nombre de la función que se tiene que ejecutar después que acabe. Con este código, primero se ejecuta miFuncion() y cuando acaba completamente, se ejecuta funcionCallback(). Pero atención que este ejemplo lo hemos simplificado para que se pueda entender fácilmente y esta sintaxis sólo valdrá si funcionCallback no recibe parámetros, porque no los podemos indicar con el nombre de la función. Veamos entonces una forma de hacer este callback que funcione siempre:

miFuncion ("parametros de la funcion", function(){
   funcionCallback();
});

Con este código, que funcionaría igual que el anterior, lo bueno es que sí podemos indicar los parámetros que se necesiten para la llamada a funcionCallback().

Ejemplo real de callback con jQuery

Ahora que hemos aprendido toda la teoría, veamos un ejemplo práctico que solucionaría el problema comentado anteriormente sobre el procesamiento de diversos efectos y cambios en las propiedades de los objetos, para que se hagan siempre en la secuencia que deseamos. Se trata simplemente de aplicar las llamadas con callback que hemos antes.

$("#micapa").fadeOut(1000, function(){
   $("#micapa").css({'top': 300, 'left':200});
   $("#micapa").fadeIn(1000);
});

Como se puede ver, en la llamada a fadeOut() estamos pasando como parámetros el valor 1000, que son los milisegundos tiene que durar el efecto fade out (fundido hacia transparente), y luego la función callback, que se ejecutará después de que fadeOut() haya terminado.

Como el método css() (se encuentra como primera instrucción de la función callback) es instantáneo, no necesita hacerse un callback para ejecutar el fadeIn(), sino que se puede escribir directamente en la siguiente línea de código. Así pues, se ve que el callback, al menos en este ejemplo, sólo es necesario hacerlo cuando se ejecutan funciones que realizarán un procesamiento prolongado.

Podemos ver este ejemplo de callback en una página aparte.

Hasta aquí, a lo largo de los capítulos de este manual de jQuery, hemos leído la introducción a este popular framework Javascript, tal como se puede ver en el apartado "How to use jQuery" publicada en la página de documentación. Desde DesarrolloWeb.com hemos enriquecido este tutorial de jQuery aportando nuevos ejemplos y explicaciones adicionales, encaminadas a que cualquier persona, con unos conocimientos básicos de Javascript, pueda entender y aprender a usar estas librerías de programación cross-browser. Ahora podemos hacer una pausa en este manual y volveremos pronto con nuevos artículos para explicar otros asuntos sobre la programación con jQuery.

A continuación podrás leer ejemplos de Ajax sencillos, que seguramente te darán una muestra excelente de las posibilidades de este framework. Luego, tendrás ocasión de seguir documentándote con muchos otros artículos que tratarán de explicarte jQuery desde principio a fin.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Edgar Ramirez

26/9/2010
Uso de jquery
Hola el tutorial esta muy bueno, felicidades!

Solo tengo una duda ya que segui todos los pasos de tutorial y dtodo se desarrolla muy bien, pero los acentos dentro de una palabra en el explorador me los deforma!

Que puedo hacer para el IE los pueda publicar como lo hace en sus ejemplos

alejandro

08/11/2010
gracias
Muy bueno el articulo. Super claro!

inigo

11/9/2011
Felicitaciones
Estupendo manual de iniciación a JQuery. Y los ejemplos funcionan.

lekofev

21/11/2011
Tambien puedes hacer esto
Excelente ayuda, gracias amigo.
jugando con el codigo, tambien se puede hacer una secuencia de animaciones de esta manera:
$(document).ready(function(){
$('#caja').fadeOut(2000,acc1);

function acc1(){
$('#caja').css({'position':'absolute','top':'400px','left':'400px'});
acc2();
}
function acc2(){
$('#caja').fadeIn(2000);
acc3();
}
function acc3(){
$('#caja').hide(2000);
acc4();
}
function acc4(){
$('#caja').show(2000);
// acc5();
}
function acc5(){
$('#caja').animate(2000);
}

});

Sete

23/11/2011
Agradecimientos y pausa
Muchas gracias por el tutorial, es una maravilla. Pero hace ya más de dos años de la pausa, qué más tienes para ofrecerme? Muchas gracias de nuevo! Un saludo,

Sete

lucas

02/12/2011
..
Hola la verdad me intereso mucho eso, lo que yo hice fue poner dos y quiero que cuando le doy al segundo enlace me aparezca arriba del primero y viceversa, si alguien me puede decir como lo hago le agradezco mucho

matts656

17/12/2011
Forma alternativa
Una forma alternativa de lograr el efecto es aplicando "setTimeout()".

$("#micapa").fadeOut(1000);
setTimeout("$('#micapa').css({'top': 300, 'left':200})", 1500);
setTimeout("$('#micapa').fadeIn(1000)", 1500);

Me gustaria saber si esta manera es igual de eficiente que la del tutorial o no.

kamus

25/6/2012
very good Callback
hola muchas gracias por la aportación era lo que estaba buscando

juan porfirio roque

29/6/2014
pregunta sobre jquery y js
disculpe estoy desarrollando un sistema para un trabajo escolar pero tengo una duda puedo llamar una función de jQuery desde una función de javascrip por ejemplo

$(function){
function miFuncionjQ()
{
}
});

function miFuncionJs()
{
miFuncionjQ();
}

espero si me pudiera contestar mi correo que puse es el institucional d mi universidad espero y me pueda ayudar gracias ;)

Gsun

06/8/2014
Como mola
Muy buen tutorial, es adictivo