2010-04-05 8 views
25

J'ai un petit extrait de jquery qui affiche un message de notification en haut de l'écran en réponse aux actions de l'utilisateur sur une page. La notification est souvent affichée après les actions Ajax avec le contenu dynamique à l'intérieur.Comment arrêter/remplacer une fonction Jquery TimeOut?

Par exemple:

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

La notification fonctionne bien, sauf lorsqu'un utilisateur fait deux ou plusieurs actions en succession rapide, auquel cas la fonction TimeOut va se dérouter et le deuxième message semble venir à l'intérieur du 3000 millisecondes précédentes.

Y at-il un moyen de "tuer" la notification précédente si une nouvelle action est effectuée. Je n'ai aucun problème avec les actions/sélecteurs, juste la fonction TimeOut .... soit en l'arrêtant soit en la surchargeant d'une manière ou d'une autre. Ou peut-être y a-t-il une meilleure alternative pour que le message reste sur l'écran pendant quelques secondes avant de disparaître?

Merci.

Répondre

56

D'abord, vous stocker la valeur de retour de la fonction setTimeout:

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

Ensuite, lorsque vous êtes prêt à tuer le délai d'attente ... vous appelez juste clearTimeout avec la valeur stockée de la précédente appelez au setTimeout.

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

exécutera-t-il la fonction de temporisation après l'effacement? – sbs

6

Vous pouvez utiliser .stop()

Arrêtez l'animation actuellement en cours d'exécution sur les éléments correspondants.

6

jQuery 1.4 a intégré dans la méthode pour gérer les retards pour les animations que vous pouvez faire quelque chose comme ceci:

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

Et puis plus tard, quand vous voulez nettoyer la file d'attente d'animation que vous pouvez faire:

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

Cela effacera délai d'attente après l'exécution de la fonction avec un retard 500ms

var timeout = setTimeout(function(){ 

/* YOUR FUNCTION */ 

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