DesarrolloWeb.com > Manuales > Manual de jQuery

Método delay() para retrasar la ejecución efectos de la cola

03 de November de 2010

Valoración del artículo:

El método delay() de jQuery sirve para generar un intervalo de espera entre la ejecución de funciones de la cola de efectos.

Por Miguel Angel Alvarez

Seguir a alvarezmiguelan

El método delay() es otro de los que algún día, y quizás sea temprano, querrás aprender a utilizar para generar una pausa entre la ejecución de funciones que se encuentran en la cola de efectos.

Es tan sencillo como invocarlo indicando como parámetro el número de milisegundos que deseas que se espere entre una y otra llamada a las funciones encoladas en la cola de efectos, pero aunque sea bastante obvio, quizás estará bien ofrecer algunas notas sobre su funcionamiento.

Como sabemos, las funciones de la cola de efectos se ejecutan una detrás de la otra, sin que transcurra ningún tiempo entre los distintos efectos encolados. Es decir, en el instante que un efecto termina, comienza el siguiente efecto de la cola sin más demora. Pero esto es algo que podemos cambiar si usamos delay().

Nota: Ahora bien, cabe decir que delay() no reemplaza la función nativa setTimeout() de Javascript. el método delay() sólo sirve para generar una pausa entre efectos de la cola de efectos, pero no para producir tiempos de espera en general, que tendrán que realizarse como debemos de saber, con la función nativa setTimeout().

.delay( duración, [ nombreCola ] )

El método delay recibe dos parámetros, que explicamos a continuación:

El parámetro duración sirve para indicar los milisegundos de espera que tienen que producirse entre efecto y efecto.
El parámetro nombreCola está para indicar en qué cola de efectos se desea realizar ese retardo. Este segundo parámetro es opcional y si no lo indicamos se realizará la espera en la cola de efectos predeterminada.

Veamos el ejemplo siguiente:

capa = $("#micapa");
capa.slideUp(1000);
capa.delay(2000)
capa.slideDown(1000);

En este caso estamos encolando dos efectos, con un retardo entre medias de 2 segundos. En total habremos encolado tres funciones, la primera un efecto slideUp(), la segunda un retardo de 2000 milisegundos y la tercera un efecto slideDown().

Esta carga de las tres funciones se podría resumir, concatenando llamadas a los métodos de la siguiente manera:

capa.slideUp(1000).delay(2000).slideDown(1000);

Ejemplo completo con efectos y delay()

A continuación podemos ver una página de ejemplo completa en la que hacemos varios efectos y aplicamos varios retardos entre ellos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Cola con delay()</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
#micapa{
   left: 20px;
   top: 20px;
   position: absolute;
   font-size: 0.75em;
   font-family: tahoma, verdana, sans-serif;
   width: 740px;
   background-color: #ddf;
   padding: 10px;
   border: 1px solid #bbb;
}
</style>
<script languague="javascript">
function colaEfectos(){
   capa = $("#micapa");
   capa.slideUp(1000);
   capa.delay(2000)
   capa.slideDown(1000);

   capa.fadeTo(1500, 0.3).delay(3000).fadeTo(500, 1);

   capa.delay(500);
   capa.animate({
      "font-size": "+=0.5em"
   }, 1000, colaEfectos);
   //alert (capa.queue().length)
}
$(document).ready(function(){
   colaEfectos();
});
</script>

</head>
<body>
<div id="micapa">Vamos a ejecutar varios métodos para hacer una cola de efectos, pero vamos a ponerles un retardo entre unos y otros.</div>
</body>
</html>

Podemos ver el ejemplo en funcionamiento en una página aparte.

Ahora que ya hemos hecho múltiples ejemplos de trabajo con colas de efectos, siempre con la cola de efectos predeterminada, vamos a aprender en el próximo artículo cómo trabajar con otras colas de efectos distintas.