8.- Callbacks – Curso Básico de #Jquery #8

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.

Ir al Capitulo Siguiente (9.- La función Animate).

Ir al  Capitulo Anterior (7.- Las funciones Show y Hide).

mm

About

Desarrollador de software, lector compulsivo.

View all posts by