Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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:

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:

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies