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:
- Introducción a las colas de jQuery con queue(), dequeue() y clearQueue()
- jQuery stop(): Detener animaciones y efectos
- jQuery finish(): Finalizar y detener funciones en ejecución
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:
1 |
$(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:
1 2 3 4 5 6 7 8 9 10 |
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:
1 2 3 4 5 |
<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"> |
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: