Meter cualquier tipo de función en una cola de efectos jQuery

En estos momentos se supone que sabemos cómo introducir funciones de efectos en las colas de efectos de jQuery, ya que en los artículos anteriores del Manual de jQuery ya habíamos comenzado a analizar cómo funcionaban.

Pero ¿Qué pasa si queremos encolar otro tipo de función Javascript o jQuery? Como sabemos hasta ahora, las funciones de efectos se encolan ellas mismas sin que tengamos que hacer nada, pero si se trata de otro tipo de función la situación cambia un poco, pues tendremos que encolarla nosotros mismos explícitamente y para ello tendremos que utilizar el método queue() de jQuery.

.queue( [ nombreCola ], callback( continua ) )

El juego de parámetros con el que tenemos que llamar al método queue() para encolar cualquier tipo de función es el siguiente:

• Primer parámetro nombreCola, que es opcional, se indica el nombre de la cola donde encolar una función. Si no se indica nada, o si se indica el nombre de la cola predeterminada "fx", se encola esa función en la cola por defecto que gestiona jQuery por nosotros. Si se indica cualquier valor distinto de "fx" se encolará en esa cola que estemos indicando.
• El segundo parámetro es la función que se desea encolar. Al encolarla se coloca como última de las funciones a ejecutar de la cola, por tanto, se tendrán que ejecutar todas las funciones encoladas anteriormente antes de llegar a ésta que estamos introduciendo.

A continuación podemos ver un código de ejemplo en el que encolamos una función, que no es de efectos, en la cola de efectos predeterminada.

capa = $("#micapa");
capa.queue(function(){
   $(this).css({
      "border": "3px solid #339",
   });
   //cualquier otro código jQuery....
   //llamamos al siguiente paso de la cola
   $(this).dequeue();
});

Como se puede ver, se llama a queue() indicando la función que deseamos encolar. Ésta tiene la llamada a un método, css(), que no es un método de efecto animado y que no se encolaba de manera predeterminada como sí lo hacían las funciones de efectos. Además, luego podríamos tener un número indeterminado de instrucciones jQuery, tantas como se desee.

Lo que es importante es que, al final del código de esta función, se debe invocar explícitamente al siguiente paso de la cola. Esto lo hacemos con una llamada al método dequeue() que aun no habíamos visto. Si no llamamos a este método, ocurriría que la cola se detendría y no continuaría la ejecución de otras funciones encoladas en el caso que las hubiera.

A partir de jQuery 1.4 existe otra posibilidad de trabajo con las colas y es que a partir de esa versión del framework, la función que estamos encolando recibe un parámetro (que nosotros hemos llamado "continua") que es la función siguiente de la cola. Este parámetro nos serviría para continuar la cola sin tener que ejecutar el método dequeue(). Podemos ver un ejemplo a continuación.

capa.queue(function(continua){
   alert("Hola, esto es un código cualquiera");
   //el parámetro continua es una función para ir al siguiente paso de la cola
   continua();
});

Ejemplo jQuery para encolar funciones que no son efectos

Ahora podemos ver un ejemplo completo en el que encolamos varios tipos de funciones. Algunas son funciones de efectos, que no necesitamos que hacer nada para que se encolen y otras son funciones normales, que tenemos que encolar explícitamente.

Tenemos este código HTML:

<button id="botoncomenzar">Hacer una cola de ejecución con funciones que no son efectos</button>
<div id="micapa"></div>

Como se puede ver, hay un botón y una capa. La capa nos servirá para animarla y el botón para comenzar la animación en el momento que lo pulsemos. Veamos entonces el código del evento click que asociaremos a ese botón y que encolará varias funciones, unas de efectos y otras funciones normales.

$("#botoncomenzar").click(function(){
   capa = $("#micapa");
   //encolo directamente funciones que son efectos
   capa.animate({"width": "80px"}, 1000);
   //para encolar otras funciones utilizo queue()
   capa.queue(function(){
      $(this).css({
         "border": "3px solid #339",
      });
      $("#botoncomenzar").text("Acabo de ponerle el borde... ");
      $(this).dequeue();
   });
   capa.animate({"height": "200px"}, 2000);
   capa.queue(function(continua){
      $(this).css({
         "border": "0px"
      });
      $("#botoncomenzar").text("Quitado el borde... ");
      //el parámetro continua es una función que lleva al siguiente paso de la cola (jpara Query 1.4)
      continua();
   });
   capa.animate({
      "height": "50px",
      "width": "400px"
   }, 1000);
});

El resultado de ejecutar este código Javascript se puede ver en una página aparte.

En el siguiente artículo veremos el último uso que nos queda por explicar del método queue() y de paso, otro método interesante, stop(), que sirve para detener la ejecución de una cola.