Los callbacks sirven para hacer una pila de funciones, las cuales se ejecutaran en secuencia conforme termine cada una de ellas. Los callbacks son utilizados a menudo para efectos y animaciones de los componentes HTML. Con jquery tenemos la facilidad de utilizarlos, ya que todas las funciones de jquery tienen callback, y este siempre se envía como ultimo parámetro.
Como explique en el artículo de javascript sobre enviar funciones como parámetro, un callback puede ser una función anónima o una función ya existente, y para ello veamos un ejemplo a continuación.
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>callbacks</title>
<script src="../scripts/jquery.js"></script>
</head>
<body>
<input type="button" value="inicia" onclick="funcionPrimera();" />
<div id="div" style="width:100px; height:100px; background:#060;"></div>
</body>
</html>
Código Jquery
function functionUltima(){
alert("hola");
}
function funcionPrimera(){
$("#div").fadeOut(1000,function(){
//una función anónima puede servir tambien y se ejecuta como callback
$("#div").fadeIn(1000,functionUltima)//funcion ultima ejecuta una funcion existente
})
}
Ejemplo en ejecución
En el ejemplo anterior se ejecuta la función fadeOut() la cual desaparece un elemento HTML en un margen de tiempo siendo 1000 igual a 1 segundo, y la función fadeIn() sirve para el caso contrario; utilizo estas funciones para que sea notorio la ejecución de la pila de funciones anidadas.
Lo primero que se realiza se desaparece el div, y terminando de realizar esta acción se dispara la función anónima que procede a aparecerlo, y por último se ejecuta una función existente la cual muestra un alert().
Los callbacks son utilizados comúnmente y su enorme potencial nos permite realizar mucho dinamismo en nuestros sitios web.