Categorías: jQuery

jQuery delay(): Retrasar la ejecución de funciones de una cola

Toca repasar la función de jQuery delay(), su funcionalidad es la de retrasar la ejecución de una función esperando a ejecutarse en una cola.

¿Qué es una cola de procesos?

Una cola es una o varias funciones esperando ser ejecutadas. El orden de las colas que vamos a ver es FIFO –> first in, first out. Es decir, la primera función encolada es la primera en salir.

Quizás os puedan ser de utilidad estos otros post sobre las colas en jQuery:

Se complementa perfectamente con las funciones: animate(), show() y hide(), slideUp() y slideDown(), css() etc…

Sintaxis de jQuery delay()

Veamos la sintaxis extraída de su web oficial:

$(selector).delay(duracion, NombreCola);

Os explico los parámetros:

selector (Obligatorio): Selector del DOM, elemento donde se ejecutarán las colas.
duracion (Obligatorio): Retraso en milisegundos que queremos aplicar a la función. Existen los parámetros ‘slow’ y ‘fast’ que retrasarían la función 200 y 600 milisegundos respectivamente. También se pueden establecer a mano los milisegundos de retardo.
NombreCola (Opcional): Nombre de la cola que contiene las funciones encoladas.

Ejemplo de jQuery delay()

Vamos a ver en este ejemplo cómo retrasar la ejecución de una función en una cola:

var MiColaDeFunciones = $("#funciones");
var MiColaDeFunciones2 = $("#funciones2");

$("#botondelay").click(function(){
 MiColaDeFunciones.delay(5000).fadeOut(1000).delay("fast").fadeIn(1000);
 });

$("#botonsindelay").click(function(){
 MiColaDeFunciones2.fadeOut(1000).fadeIn(1000);
 });

Antes de explicar el código del ejemplo os explico su funcionamiento:

Se crean 2 colas, una para cada tipo de acción, con delay y sin delay.
Con los botones podemos probar la ejecución de la misma cola con delay y sin delay. Así podéis apreciar la diferencia en los tiempos de ejecución entre ambos.

Os explico el código:

Creo 2 colas, ‘MiColaDeFunciones‘ y ‘MiColaDeFunciones2‘, con delay y sin delay sobre los ids ‘funciones’ y ‘funciones2’.
Detecto el click en el botón con id ‘botondelay‘ y ejecuto los efectos de jQuery fadeOut y fadeIn sobre el párrafo con delays entre ambos.
etecto el click en el botón con id ‘botonsindelay‘ y ejecuto fadeOut y fadeIn sobre el párrafo sin delays entre ambos.

El código HTML de los botones e ids es el siguiente:

<p id="funciones">En este texto se harán los efectos con delay</p>
<p id="funciones2">En este texto se harán los efectos sin delay</p>

<input type="button" id="botondelay" value="Acción con delay">
<input type="button" id="botonsindelay" value="Acción sin delay">