jQuery onClick exécution

Question

J'ai ce bit de javascript écrit avec jQuery 1.2.5. Il est contenu dans la fonction principale() d'un plugin que j'ai écrit. Le plugin est un scroller de galerie horizontale très similaire à jCousel. Il fait beaucoup de calcul automatique des largeurs et détermine combien de faire défiler en fonction de cela et la taille des images, ce qui est ce que tous les calculs sont en cours.

Quelle est ma question, comment puis-je empêcher cela de se déclencher avant qu'une exécution précédente soit terminée. Par exemple, si je reçois un petit clic heureux et juste frénétiquement réduire sur .digi_next. Les choses ne vont pas si bien dans l'interface utilisateur quand cela arrive et je voudrais y remédier :) Je pensais que la réponse pourrait se trouver dans queue, mais toutes mes tentatives pour l'utiliser n'ont rien donné de valable.

var self = this; 
    $(".digi_next", this.container).click(function(){ 

     var curLeft = $(".digi_container", self.container).css("left").split("px")[0]; 
     var newLeft = (curLeft*1) - (self.containerPad + self.containerWidth) * self.show_photos; 

     if (newLeft < ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1) { 
      newLeft = ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1; 
     } 

     $(".digi_container", self.container).animate({ 
      left: newLeft + "px" 
     }, self.rotateSpeed); 
    }); 

Merci!

Answer 1

Utilisez simplement un indicateur global occupé. Lorsque vous entrez votre gestionnaire de clic, vérifiez-le, et ne continuez que s'il est faux. Définissez-le immédiatement sur true, puis définissez-le sur false à la fin de l'animation. JavaScript est mono-thread, donc il n'y a pas de condition de course à s'inquiéter.

var busy = false; 
$("...").onclick(function() { 
    if (busy) return false; 
    busy = true; 
    $("...").animate(..., ..., ..., function() { 
     busy= false; 
    }); 
    return false; 
}); 

Answer 2

Étant donné que les appels de fonctions JavaScript sont asynchrones, vous pouvez passer en paramètre une fonction de rappel qui est appelée à la fin de l'appel précédent (même erreur).

Vous pouvez transmettre la fonction que vous avez écrite dans ce post comme rappel pour la fonction qui a été déclenchée auparavant.

Espérons que cela aide.

Cordialement

Answer 3

Jetez un coup d'œil à jQuery UI. Spécifiquement the effects-part du plug in. J'utilise l'effet de glissière sur my personal website (cliquez sur les flèches sur les côtés des cases).

J'empêche les utilisateurs de déclencher l'effet plus d'une fois - avant que l'effet ne soit terminé - avec le one event-handler et une fonction de rappel.

Here's the source-code

Answer 4

Comme alternative à l'indicateur global afformentioned, vous pouvez affecter la valeur à l'élément DOM, de cette façon permettant à plusieurs éléments sur la page pour avoir le même comportement:

$("...").onclick(function(el) { 
    var self = el; 
    if (self.busy) return false; 
    self.busy = true; 
    $("...").animate(..., ..., ..., function() { 
     self.busy= false; 
    }); 
    return false; 
});