Las funciones callback (“devolución de llamada” para los amigos) tienen una gran utilidad a la hora de programar, principalmente en lenguajes de animación como Javascript o Action Script.

Esta vez vamos a analizar dos ejemplos de funciones callback; en el primero vamos a implementar una función callback utilizando el framework Jquery y en el segundo veremos como podemos construir estas funciones.

En el ejemplo anterior encontramos una caja (bloque) el cual podemos expandir o contraer utilizando los links.
Utilizaremos la función callback para que una vez terminada la expansión o contracción del bloque, el mismo cambie su color de negro a rojo.

¿Para que nos sirve utilizar un callback?

Para que dicha orden se ejecute una vez terminado el proceso de cambio de ancho del bloque, ni antes ni después.
Es muy común en programación llamar funciones en orden; por cierto que según el orden estas funciones se iran ejecutando. ¿Pero qué pasa cuando se ejecuta una función que dentro ejecuta un proceso con time out o un intervalo de tiempo, ya sea para desplazar un objeto o para cambiar una transparencia?… antes de que llegue a su fin este proceso ya se han ejecutado las funciones siguientes sin esperar que termine de hacer su labor la primera. Para resolver este problema existen las funciones callback; para enterarme cuando termino un proceso y ahí si ejecutar la función siguiente.

Analicemos ahora el código del ejemplo; en primer lugar tenemos el bloque de código CSS y luego aparecen dos bloques de código javascript; aquí tendremos que elegir entre uno u otro (Jquery o Javascript, no los dos a la vez); por último el código HTML que contiene los elementos que visualizamos.

Código

CSS

body {
	margin: 0 auto;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
}
h2 {
	text-align: center;
}
#box {
	background: black;
	width: 10%;
	height: 200px;
	margin: 20px auto 0 auto;
	text-align: center;
	color: white;
	vertical-align: middle;
	overflow: hidden;
	line-height: 200px;
}
a {
	color: black;
}

Opción Jquery

function cahngeWidth(id,box_w){
	$("#" + id).css({ background: "black"});
	$("#" + id).animate({ width: box_w + "%"},500,"swing",function(){
		$(this).css({ background: "red"});
	});
}

Opción Javascript

function cahngeWidth(id,box_w){
	var box = document.getElementById(id);
	easingBox(box_w, function(){ 
		box.style.background = "red";
	});
	function easingBox(box_w,callback) {
		var target = box.offsetParent;
		var w = (box.offsetWidth / target.offsetWidth) * 100;
		var time = setInterval(stretch,50);
		function stretch(){
			if((w < box_w)? Math.round(w) < box_w : Math.round(w) > box_w){
				w += (box_w - w) * 0.3;
			}else{
				w = box_w;
				clearInterval(time);
				callback();
			}
			box.style.width = w + "%";
		}
		box.style.background = "black";
	}
}

HTML


Expandir
Contraer

Jquery

Jquery es un framework que me permite tener ya resuelto un sin fin de algoritmos y funciones que de otra manera en Javascript me vería obligado a programar; a menos que ya tengamos nuestro propio framework. Eso significa que la cantidad de líneas que utilizaré para resolver mi problema será sensiblemente menor.

function cahngeWidth(id,box_w){
	$("#" + id).css({ background: "black"});
	$("#" + id).animate({ width: box_w + "%"},500,"swing",function(){
		$(this).css({ background: "red"});
	});
}

En este ejemplo podemos ver cómo el método “animate” de Jquery nos permite proveer un último parámetro que es una función; esta función es el callback; por tanto se ejecutará una vez haya terminado la animación. Los metodos en este caso son: La propiedad que quiero animar, en este caso “width”, el tiempo que durará la animación de cambio de ancho y por último la función que será ejecutada al terminar. Es dentro de esta función donde puedo agregar las acciones que pretendo aplicar una vez terminada la animación.

Javascript

Acá es donde vamos a analizar como es que creamos un callback con javascript; en pocas palabras vamos a utilizar la lógica que utiliza Jquery en su interna (no necesariamente con la misma sintaxis).

function cahngeWidth(id,box_w){
	var box = document.getElementById(id);
	easingBox(box_w, function(){ 
		box.style.background = "red";
	});
	function easingBox(box_w,callback) {
		var target = box.offsetParent;
		var w = (box.offsetWidth / target.offsetWidth) * 100;
		var time = setInterval(stretch,50);
		function stretch(){
			if((w < box_w)? Math.round(w) < box_w : Math.round(w) > box_w){
				w += (box_w - w) * 0.3;
			}else{
				w = box_w;
				clearInterval(time);
				callback();
			}
			box.style.width = w + "%";
		}
		box.style.background = "black";
	}
}

El llamado a la función “easingBox” es lo mismo que hace Jquery con “animate” en nuestro caso sólo pasamos dos parámetros: El ancho final que queremos que tenga nuestra caja animada y en segundo lugar la función callback. Lo que si es nuevo para nostros es el contenido de esta nueva función llamada “easingBox”, en la cual podemos ver un setInterval que ejecutará cada 50 milisegundos otra función que será la responsable de corregir el ancho del bloque en cada intervalo de tiempo hasta llegar al ancho final recibido en el parámetro, en nuestro caso 80%.

Cuando el ancho de la caja llegue al ancho del parámetro, en el condicional pasarán tres cosas: La primera es igualar el ancho resultante al ancho exacto, la segunda es borrar el intervalo de tiempo para que que no se siga ejecutando la función “stretch” innecesariamente y por último hacer un llamado a la función “callback()” con el mismo nombre que el parámetro que recibo.

Es importante hacer una aclaración; el nombre “callback” es un nombre elegido por nosotros, perfectamente le podíamos poner de nombre “pedro”, usamos ese nombre porque lo ideal es que llamemos a los métodos con un nombre coherente a la tarea que realiza.

Conclusión

Cada vez que pasemos en una función un parámetro que contiene otra función; bastará que dentro de esa función hagamos un llamado con el mismo nombre “nombre()” para que la función pasada sea ejecutada.

De ahora en más no solo ampliamos nuestros conocimientos de programación sino que también habremos encontrado una herramienta útil para resolver un problema típico cuando utilizamos lenguajes para animación.

Descargar ejemplo Jquery

Descargar ejemplo Javascript

¡Hasta pronto!

Categoría: Tutoriales, Web

Publicado por: negro

Artículos Relacionados

5 Respuestas para “Funciones callback (Javascript y Jquery)”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>