> Manuales > Manual de jQuery

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

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:

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual