2010-04-05 3 views
25

Ho uno snippet jquery piccolo che visualizza un messaggio di notifica nella parte superiore dello schermo in risposta alle azioni dell'utente su una pagina. La notifica viene spesso visualizzata dopo le azioni Ajax con contenuto dinamico al suo interno.Come interrompere/sovrascrivere una funzione Timeout di Jquery?

Ad esempio:

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

La notifica funziona bene, tranne quando un utente fa due o più azioni in rapida successione, nel qual caso la funzione timeout confondere stesso e il secondo messaggio sembra venire all'interno precedenti 3000 millisecondi.

C'è un modo per "uccidere" la notifica precedente se viene eseguita una nuova azione. Non ho alcun problema con le azioni/i selettori, solo la funzione TimeOut .... o la interrompe o la sovrascrive in qualche modo. O forse c'è un'alternativa migliore per far rimanere il messaggio sullo schermo per qualche secondo prima di scomparire?

Grazie.

risposta

56

In primo luogo, si memorizza il valore di ritorno per la funzione setTimeout:

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

Poi, quando si è pronti a uccidere il timeout ... basta chiamare clearTimeout con il valore memorizzato dal precedente chiamare allo setTimeout.

// Then clearn the timeout 
clearTimeout(timeout); 
+0

eseguirà la funzione di timeout dopo la cancellazione? – sbs

6

È possibile utilizzare .stop()

interrompere l'animazione attualmente in esecuzione sugli elementi corrispondenti.

6

jQuery 1.4 è dotato di un metodo per gestire i ritardi per le animazioni che si può fare qualcosa di simile:

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

E poi, quando si vuole pulire la coda di animazione che si può fare:

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

Questo cancellerà timeout dopo l'esecuzione funzione con ritardo 500ms

var timeout = setTimeout(function(){ 

/* YOUR FUNCTION */ 

}, 500, function(){ 
    clearTimeout(timeout); 
});