jQuery finish(): Finalizar y detener las funciones en ejecución

Nueva entrada para repasar la función de jQuery finish() que sirve para finalizar y detener las funciones en ejecución.

Es muy similar a la función stop() con los parámetros stop(true, true), la única diferencia entre ambas es la de que las propiedades CSS de las animaciones encoladas pasan a su estado final.

Quizás os puedan ser de utilidad estos otros post sobre las colas en jQuery:

Sintaxis de jQuery finish()

Veamos la sintaxis extraída de su web oficial:

$(selector).finish(Cola);

1	$(selector).finish(Cola);

Os explico los parámetros:

selector (Obligatorio): Elemento del DOM donde se desarrollan las animaciones y funciones.
Cola (Opcional): Nombre de la cola de funciones a finalizar.

Ejemplo de jQuery finish()

Vamos a probar su funcionalidad en este sencillo ejemplo:

$("#comenzarefectos").click(function(){
	$("#funciones").slideUp(6000);
    $("#funciones").slideDown(6000);
});

$("#finaliza").click(function(){
    $("#funciones").finish();
});

$("#comenzarefectos").click(function(){

$("#funciones").slideUp(6000);

$("#funciones").slideDown(6000);

});

$("#finaliza").click(function(){

$("#funciones").finish();

});

Os explico el ejemplo con los 2 primeros botones:

Detecto el click en el botón con id = ‘comenzarefectos‘, entonces aplicamos 2 efectos de 6 segundos de duración cada uno. Son slideUp y slideDown para ocultar y mostrar el rectángulo.
Después podemos finalizar la ejecución de las 2 funciones detectando el click en el botón con id = ‘finaliza’. Dependiendo de cuando clickemos finalizaremos una o las 2 funciones. Para que os de tiempo a observar como se detienen les he puesto 6 segundos de duración.

var MiColaDeFunciones = $("#funciones");

$("#botoncomenzarcola").click(function(){
	MiColaDeFunciones.fadeOut(6000);
	MiColaDeFunciones.fadeIn(6000);
});

$("#botonfinishcola").click(function(){
    MiColaDeFunciones.finish();
});

var MiColaDeFunciones = $("#funciones");

$("#botoncomenzarcola").click(function(){

MiColaDeFunciones.fadeOut(6000);

MiColaDeFunciones.fadeIn(6000);

});

$("#botonfinishcola").click(function(){

MiColaDeFunciones.finish();

});

Os explico el ejemplo con los 2 botones que trabajan con colas de funciones, para el ejemplo se crea la cola ‘MiColaDeFunciones‘ en el selector ‘#funciones‘:

Detecto el click en el botón con id = ‘botoncomenzarcola‘, entonces aplicamos 2 efectos de 6 segundos de duración cada uno. Son fadeOut y fadeIn para ocultar y mostrar el rectángulo.
Con el click en el botón con id = ‘botonfinishcola‘ finalizo todas las funciones de la cola que se estén ejecutando o pendientes de ejecutarse. La cola es vaciada.