Callback de funciones jQuery

31/05/16 20:40

ej. css

Buscar
Hola pascualpobil
Panel Control

Cerrar Sesin

DesarrolloWeb.com > Manuales > Manual de jQuery

Callback de funciones jQuery

Por Miguel Angel Alvarez

Seguir a @midesweb

! 27 de mayo de 2009 " 10 Comentarios # Frameworks Javascript

Con callback de jQuery podemos hacer una secuencia de llamadas a

funciones o una pila de funciones que se ejecutarn una detrs 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 detrs de otra, creando un efecto ms elaborado. En este artculo veremos lo
sencillo que es realizar lo que en ingls se llama "callback", es decir una funcin que se
ejecuta despus de otra.
Apilar funciones, para que se ejecuten una detrs de otra, nos servir para hacer muchas cosas. En
nuestro da a da 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 dinmicos 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 posicin y volverla a mostrar (ya en la nueva posicin) con otro
efecto de fundido (en este caso de transparente a opaco). En principio podramos pensar en hacer un
cdigo como este:
$("#micapa").fadeOut(2000);
$("#micapa").css({top: 300, left:200});
$("#micapa").fadeIn(2000);

http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 1 of 8

Callback de funciones jQuery

31/05/16 20:40

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 (vase el parmetro 2000, que son los
milisegundos que durar el efecto). Luego alteramos la posicin 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 artculo Efectos Rpidos
con jQuery.

Si lanzamos la ejecucin de estas sentencias, tal como aparece en el cdigo, ser como si se ejecutasen
todas a la vez. Como los fadeOut y fadeIn tardarn 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 posicin y luego veremos los dos efectos de fundido.
Lo mejor para darse cuenta de este caso es verlo en marcha.

Cmo realizar una pila de ejecucin de funciones

Ahora que ya hemos visto uno de los casos en los que necesitaramos ejecutar funciones
en una pila, una despus de otra, esperando a que termine completamente la ejecucin
de cualquier efecto o accin antes de comenzar con la siguiente. Vamos a ver cmo
hacerlo con jQuery.
Simplemente tenemos que saber que todas las funciones o mtodos de jQuery pueden recibir un
parmetro adicional con el nombre de la funcin que se tiene que ejecutar despus que termine el
procesamiento de la primera. Esa segunda funcin que se ejecuta despus de la primera es la que se
conoce en ingls por callback. Un ejemplo sencillo para entenderlo.
miFuncion ("parametros de la funcin", funcionCallback);

En ese esquema de llamada a miFuncion(), se le estn pasando dos parmetros. El primero sera un
supuesto parmetro que necesitase miFuncion() y el segundo, que es le que nos interesa en este caso,
el nombre de la funcin que se tiene que ejecutar despus que acabe. Con este cdigo, primero se
ejecuta miFuncion() y cuando acaba completamente, se ejecuta funcionCallback(). Pero atencin que
este ejemplo lo hemos simplicado para que se pueda entender fcilmente y esta sintaxis slo valdr
si funcionCallback no recibe parmetros, porque no los podemos indicar con el nombre de la funcin.
Veamos entonces una forma de hacer este callback que funcione siempre:
miFuncion ("parametros de la funcion", function(){
funcionCallback();
});

Con este cdigo, que funcionara igual que el anterior, lo bueno es que s podemos indicar los

http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 2 of 8

Callback de funciones jQuery

31/05/16 20:40

Con este cdigo, que funcionara igual que el anterior, lo bueno es que s podemos indicar los
parmetros que se necesiten para la llamada a funcionCallback().

Ejemplo real de callback con jQuery

Ahora que hemos aprendido toda la teora, veamos un ejemplo prctico que solucionara
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 parmetros el valor 1000, que
son los milisegundos tiene que durar el efecto fade out (fundido hacia transparente), y luego la funcin
callback, que se ejecutar despus de que fadeOut() haya terminado.
Como el mtodo css() (se encuentra como primera instruccin de la funcin callback) es instantneo,
no necesita hacerse un callback para ejecutar el fadeIn(), sino que se puede escribir directamente en la
siguiente lnea de cdigo. As pues, se ve que el callback, al menos en este ejemplo, slo es necesario
hacerlo cuando se ejecutan funciones que realizarn un procesamiento prolongado.
Podemos ver este ejemplo de callback en una pgina aparte.
Hasta aqu, a lo largo de los captulos de este manual de jQuery, hemos ledo la introduccin a este
popular framework Javascript, tal como se puede ver en el apartado "How to use jQuery" publicada en
la pgina de documentacin. Desde DesarrolloWeb.com hemos enriquecido este tutorial de jQuery
aportando nuevos ejemplos y explicaciones adicionales, encaminadas a que cualquier persona, con
unos conocimientos bsicos de Javascript, pueda entender y aprender a usar estas libreras de
programacin cross-browser. Ahora podemos hacer una pausa en este manual y volveremos pronto
con nuevos artculos para explicar otros asuntos sobre la programacin con jQuery.
A continuacin podrs leer ejemplos de Ajax sencillos, que seguramente te darn una muestra
excelente de las posibilidades de este framework. Luego, tendrs ocasin de seguir documentndote
con muchos otros artculos que tratarn de explicarte jQuery desde principio a n.

Autor
http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 3 of 8

Callback de funciones jQuery

31/05/16 20:40

Miguel Angel Alvarez

Seguir a @midesweb

Miguel es fundador de DesarrolloWeb.com y la plataforma de formacin

online EscuelaIT. Comenz en el mundo del desarrollo web en el ao 1997,
transformando su hobby en su trabajo.

Subir %

Manual
Manual de jQuery
& Efectos rpidos con jQuery

Uso de Ajax muy sencillo con jQuery '

Compartir
5
Compartir

Tweet

4
Recomendar

Comentarios
( Enviar un comentario al artculo

Edgar Ramirez
Uso de jquery

26/9/2010

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
http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 4 of 8

Callback de funciones jQuery

31/05/16 20:40

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

alejandro
gracias

08/11/2010

Muy bueno el articulo. Super claro!

Marcar como spam

inigo
Felicitaciones

11/9/2011

Estupendo manual de iniciacin a JQuery. Y los ejemplos funcionan.

Marcar como spam

lekofev
Tambien puedes hacer esto

21/11/2011

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(){
http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 5 of 8

Callback de funciones jQuery

31/05/16 20:40

function acc4(){
$('#caja').show(2000);
// acc5();
}
function acc5(){
$('#caja').animate(2000);
}
});
Marcar como spam

Sete
Agradecimientos y pausa

23/11/2011

Muchas gracias por el tutorial, es una maravilla. Pero hace ya ms de dos aos de la
pausa, qu ms tienes para ofrecerme? Muchas gracias de nuevo! Un saludo,
Sete
Marcar como spam

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
Marcar como spam

matts656
Forma alternativa

17/12/2011

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);
http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 6 of 8

Callback de funciones jQuery

31/05/16 20:40

setTimeout("$('#micapa').fadeIn(1000)", 1500);
Me gustaria saber si esta manera es igual de eciente que la del tutorial o no.
Marcar como spam

kamus
very good Callback

25/6/2012

hola muchas gracias por la aportacin era lo que estaba buscando

Marcar como spam

juan porrio roque

pregunta sobre jquery y js

29/6/2014

disculpe estoy desarrollando un sistema para un trabajo escolar pero tengo una duda
puedo llamar una funcin de jQuery desde una funcin 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 ;)
Marcar como spam

Gsun
Como mola
http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

06/8/2014
Page 7 of 8

Callback de funciones jQuery

31/05/16 20:40

Como mola

06/8/2014

Muy buen tutorial, es adictivo

Marcar como spam
( Enviar un comentario al artculo

Principales

Monotemticos

Blogging

Manuales

Desde cero

Actualidad

FAQs

HTML, CSS

De inters

En directo

Javascript, Ajax

Agenda

Vdeos

Diseo, ASP

)
*
+
$

Powered by:

Desarrolloweb.com Copyright Publicidad Acerca de Datos legales P. de cookies Contacta

http://www.desarrolloweb.com/articulos/callback-funciones-jquery.html

Page 8 of 8