Normalmente cuando llamamos a varias funciones una tras otras en JavaScript, la siguiente no espera a que haya terminado de procesarse la anterior para comenzar su ejecución.
Sin embargo, en determinados casos necesitaremos que no se procese una función antes de que haya finalizado la anterior. En estos casos podemos hacer uso de las denominadas funciones callback.
Para definir una función callback la pasaremos como parámetro otra función, que en caso de que no reciba parámetros basta con indicar su nombre para llamarla, pero de requerirlos deberá ser llamada desde dentro de otra función.
Veámos un ejemplo:
<!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>
<title>InformaticaPC | Callbacks en JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
#div1, #div2 { float:left;height:150px;width:150px;margin:10px; }
#div1 { background-color:lightgreen; }
#div2 { background-color:lightblue; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btnOcultar").click(function() {
// Borrar el log
$("#log").html(" ");
// Ocultar el DIV
$("#div1").fadeOut("slow");
// Mostra el mensaje
mensaje1();
});
// -----------------
$("#btnMostrar1").click(function() {
// Borrar el log
$("#log").html(" ");
// Mostrar el elemento, incluyendo como callback la función 'mensaje'
// (sin parámetros)
$("#div1").fadeIn( "slow", mensaje1 );
});
// -----------------
$("#btnMostrar2").click(function() {
// Borrar el log
$("#log").html(" ");
// Mostrar el elemento, incluyendo como callback la función 'mensaje'
// pasándole un parámetro (observa que la llamamos desde dentro de otra función)
$("#div1").fadeIn("slow", function() {
mensaje2("Procesada la función callback CON PARÁMETRO");
});
});
// -----------------
function mensaje1() {
$("#log").html("Procesada la función callback SIN PARÁMETRO");
}
// -----------------
function mensaje2( texto ) {
$("#log").html( texto );
}
});
</script>
</head>
<body>
<div id="log"> </div>
<p>1) Pulsa para ocultar el DIV (observa que el mensaje se muestra ANTES de que se haya ocultado).</p>
<p>2) Pulsa el botón para mostrarlo llamando a la función callback SIN parámetros (observa que el mensaje<br /> se muestra DESPUÉS de que se haya ocultado).</p>
<p>3) Vuelve a ocultar el DIV.</p>
<p>4) Pulsa el botón para mostrar el DIV llamando a la función callback CON parámetros.</p>
<input type="button" id="btnOcultar" value="Ocultar (sin callback)" />
<input type="button" id="btnMostrar1" value="Mostrar (con callback)" />
<input type="button" id="btnMostrar2" value="Mostrar (con callback y paramétros)" /><br />
<div id="div1"></div>
</body>
</html>
El objeto Callback de JQuery proporciona varios métodos con los que podremos manejar de forma sencilla listas de callbacks. Algunos de sus métodos más útiles son:
- add(): agrega una función a la lista.
- remove(): eliminar una función de la lista.
- fire(): recorre las funciones en la lista.
- empty(): vacía la lista de funciones.
Consulta el enlace facilitado al final para obtener información sobre otros métodos disponibles en dicho objeto.
Veamos un ejemplo de uso:
<!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>
<title>InformaticaPC | Funciones en JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow; }
div { width:200px; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
/* Creamos tres funciones */
var sumar = function( num1, num2 ) {
$("#log").append("SUMA: [" + (num1+num2) + "] <br />");
}
var restar = function( num1, num2 ) {
$("#log").append("RESTA: [" + (num1-num2) + "] <br />");
}
var multiplicar = function( num1, num2 ) {
$("#log").append("MULTIPLICACIÓN: [" + (num1*num2) + "] <br />");
}
// ---------------------
/* Creamos el objeto Callback y agregamos las funciones */
// Creamos el objeto
var objCall = $.Callbacks();
// Agregamos las funciones
objCall.add( sumar );
objCall.add( restar );
objCall.add( multiplicar );
// ---------------------
// Ejecutar las funciones en el Callback
$("#btnMostrar").click(function(){
$("#log").text("");
objCall.fire( 50, 30 );
});
// ---------------------
// Eliminar la función 'restar' del Callback
$("#btnEliminar").click(function(){
objCall.remove( restar );
});
});
</script>
</head>
<body>
<div id="log"></div>
<p>1) Pulsa para recorrer las funciones en el Callback.</p>
<p>2) Pulsa el botón para eliminar la función restar del Callback.</p>
<p>1) Vuelve a pulsar para recorrer las funciones en el Callback.</p>
<input type="button" id="btnMostrar" value="Recorrer el Callback" />
<input type="button" id="btnEliminar" value="Eliminar la función restar" />
</body>
</html>
Vea también: [ Objeto Callback ]
