Vamos ver qué son las colas en jQuery y cómo podemos encolar cualquier tipo de función en una de ellas. Las funciones básicas que vamos a repasar son:
La funcionalidad de estas es acceder y manipular en una cola de procesos cualquier función a la espera de ejecutarse.
Este post es de introducción y conocimiento de las colas, quizás os interesen también estos otros post sobre las colas en jQuery:
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.
El método queue() nos permite acceder y modificar una cola de efectos. Tras ver su documentación oficial esta es su sintaxis:
$(selector).queue(NombreDeLaCola);
Os explico los parámetros:
Si invocamos a la función sin pasar ningún ‘nombre de cola‘ nos devolverá la cola por defecto (fx) con las funciones encoladas. El formato devuelto es una array con dichas funciones.
$(selector).queue(); //es lo mismo que... $(selector).queue(fx);
En cambio si pasamos un ‘nombre de cola‘ nos devolverá las funciones encoladas en dicha cola en ese instante.
El método dequeue() nos permite ejecutar la siguiente función encolada en una cola de efectos, posteriormente dicha función se elimina de la cola. Tras ver su documentación oficial esta es su sintaxis:
$(selector).dequeue(NombreDeLaCola);
Os explico los parámetros:
Si invocamos a la función sin pasar ningún ‘nombre de cola‘ nos ejecutará la siguiente función en la cola por defecto (fx).
$(selector).dequeue(); //es lo mismo que... $(selector).dequeue(fx);
En cambio si pasamos un ‘nombre de cola‘ ejecutará la siguiente función encolada de dicha cola.
El método clearQueue() elimina de una cola todas las funciones pendientes de ejecutarse. Tras ver su documentación oficial esta es su sintaxis:
$(selector).clearQueue(NombreDeLaCola);
Os explico los parámetros:
Si invocamos a la función sin pasar ningún ‘nombre de cola‘ nos ejecutará la siguiente función en la cola por defecto (fx).
$(selector).clearQueue(); //es lo mismo que... $(selector).clearQueue(fx);
En cambio si pasamos un ‘nombre de cola‘ eliminará las funciones de dicha cola.
Vamos a ver con este sencillo ejemplo cómo interactuar con colas en jQuery:
//Función para mostrar elementos en cola function NumeroEnCola() { $("#contador").text("Funciones en cola = " + $("#funciones").queue().length); } $(document).ready(function() { var MiColaDeFunciones = $("#funciones"); MiColaDeFunciones.css("background-color", "red"); MiColaDeFunciones.slideToggle( 5000 ); MiColaDeFunciones.slideToggle( 5000 ); MiColaDeFunciones.animate({ width: "300" }, 5000 ); MiColaDeFunciones.animate({ height: "300" }, 5000 ); MiColaDeFunciones.hide( "slow" ); MiColaDeFunciones.show( 5000 ); NumeroEnCola(); //mostrar elementos en cola $("#boton").click(function(){ NumeroEnCola(); }); //limpiar la cola $("#limpiar").click(function(){ MiColaDeFunciones.clearQueue(); NumeroEnCola(); }); //ejecutar siguiente función encolada $("#siguiente").click(function(){ MiColaDeFunciones.dequeue(); NumeroEnCola(); }); });
Antes de explicar el código del ejemplo os explico su funcionamiento:
Os explico el código superior:
El código HTML de los botones y divs es el siguiente:
<div id="contador"></div> <input type="button" id="boton" value="Actualizar funciones en cola"> <input type="button" id="limpiar" value="Limpiar la cola"> <input type="button" id="siguiente" value="Ejecutar siguiente función"> <div id="funciones" style="height:60px; width:500px;">En este texto se harán los efectos encolados</div>
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: