Introducción a las colas de jQuery con queue y clearQueue

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:

queue()
dequeue()
clearQueue()

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:

¿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.

Sintaxis de jQuery queue()

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);

1	$(selector).queue(NombreDeLaCola);

Os explico los parámetros:

selector (Obligatorio): Selector del DOM, elemento donde se ejecutarán las colas.
NombreDeLaCola (Opcional): Es el nombre de la cola, por defecto es fx (Cola de efectos standard).

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);

$(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.

Sintaxis de jQuery dequeue()

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);

1	$(selector).dequeue(NombreDeLaCola);

Os explico los parámetros:

selector (Obligatorio): Selector del DOM, elemento donde se ejecutarán las colas.
NombreDeLaCola (Opcional): Es el nombre de la cola de donde se eliminará/ejecutará la función.

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);

$(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.

Sintaxis de jQuery clearQueue()

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);

1	$(selector).clearQueue(NombreDeLaCola);

Os explico los parámetros:

selector (Obligatorio): Selector del DOM, elemento donde se ejecutarán las colas.
NombreDeLaCola (Opcional): Es el nombre de la cola de donde se eliminarán las funciones pendientes de ejecutarse.

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);

$(selector).clearQueue();

//es lo mismo que...

$(selector).clearQueue(fx);

En cambio si pasamos un ‘nombre de cola‘ eliminará las funciones de dicha cola.

Ejemplo de funcionamiento de una cola en jQuery

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();
		});

	});

//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.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:

Según entramos al ejemplo se comienzan a ejecutar todas las funciones encoladas.
Para que podáis interactuar con la demo les he puesto una ejecución de 5 segundos, de esta manera los procesos como son largos se comienzan a encolar, y así podéis clickar en el botón que muestra la funciones pendientes (encoladas) de ejecutarse.
También podéis clickar en el botón ‘Ejecutar siguiente función‘ para saltarnos la cola.
De igual manera podéis limpiar la cola y parar la ejecución de las funciones pendientes.

Os explico el código superior:

Se crea la función ‘NumeroEnCola‘ que mostrará en el div con id = ‘contador’ el número de funciones en cola de la cola ‘$(«#funciones»)‘ usando la función de jQuery text().
Creo la cola ‘MiColaDeFunciones‘ y la asocio con ‘$(«#funciones»)‘.
Asigno a dicha cola una serie de funciones y efectos usando las funciones css(), slideToggle(), animate(), hide() y show().
Detectamos si se hace click en el botón con id = ‘boton’ y llamamos la función ‘NumeroEnCola‘ para mostrar las funciones que están actualmente encoladas.
Detectamos si se hace click en el botón con id = ‘siguiente’ para ejecutar la siguiente función encolada. Además mostramos el número de funciones pendientes.
Detectamos si se hace click en el botón con id = ‘limpiar’ para borrar de la cola ‘MiColaDeFunciones‘ las funciones que sigan encoladas. Estas funciones no se ejecutarán. Posteriormente llamamos la función ‘NumeroEnCola‘ para mostrar las funciones que están actualmente encoladas, tiene que dar 0.

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>