javascript - usar - stop settimeout jquery

¿Cómo detener/anular una función de Jquery TimeOut?

Question

Tengo un pequeño fragmento de jquery que muestra un mensaje de notificación en la parte superior de la pantalla en respuesta a las acciones del usuario en una página. La notificación a menudo se muestra después de las acciones Ajax con contenido dinámico en su interior.

Por ejemplo:

$("#mini-txt").html("Thank you!");
$("#mini").fadeIn("fast");
setTimeout(function() {$("#mini").animate({height: "hide", opacity: "hide"}, "medium");}, 3000);

La notificación funciona bien, excepto cuando un usuario realiza dos o más acciones en rápida sucesión, en cuyo caso la función TimeOut se confundirá y el segundo mensaje aparecerá dentro de los 3000 milisegundos anteriores.

¿Hay una manera de "matar" la notificación previa si se realiza una nueva acción. No tengo ningún problema con las acciones / selectores, solo la función TimeOut ... ya sea deteniéndola o anulando de alguna manera. ¿O tal vez hay una mejor alternativa para que el mensaje permanezca en la pantalla durante unos segundos antes de desaparecer?

Gracias.

Answer 1

Esto borrará el tiempo de espera después de que la función se ejecute con un retraso de 500 ms

var timeout = setTimeout(function(){
/* YOUR FUNCTION */
}, 500, function(){
clearTimeout(timeout);
});

Answer 2

Primero, almacena el valor de retorno para la función setTimeout :

// Set the timeout
var timeout = setTimeout(function()
{
// Your function here
}, 2000);

Luego, cuando esté listo para clearTimeout el tiempo de espera ... simplemente llame a clearTimeout con el valor almacenado de la llamada anterior a setTimeout .

// Then clearn the timeout
clearTimeout(timeout);

Answer 3

Puedes usar .stop()

Detenga la animación que se está ejecutando actualmente en los elementos coincidentes.

Answer 4

jQuery 1.4 tiene un método incorporado para manejar los retrasos de las animaciones que puedes hacer de la siguiente manera:

$("#mini-txt").html("Thank you!");
$("#mini").fadeIn("fast").delay(3000).animate({height: "hide", opacity: "hide"}, "medium");

Y luego, cuando quieras limpiar la cola de animación, puedes hacer:

$("#mini").stop(true);