Exécution de jQuery onClick

Question

J'ai ce morceau 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 une barre de défilement horizontale très similaire à jCarousel. Il effectue beaucoup de calcul automatique des largeurs et détermine le nombre de défilements en fonction de la taille des images, ce qui correspond à tous les calculs en cours.

Quelle est ma question, comment puis-je éviter que cela ne se déclenche avant la fin d'une exécution précédente? Par exemple, si je reçois un petit clic heureux et écrase frénétiquement .digi_next . Cela ne se passe pas très bien dans l'interface utilisateur lorsque cela se produit et j'aimerais corriger ce problème :) rien qui vaille la peine.

    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);
    });

Answer 1

Utilisez simplement un drapeau global occupé. Lorsque vous entrez dans votre gestionnaire de clics, cochez-le et ne procédez que s'il est faux. Définissez-la immédiatement sur true, puis redéfinissez-la sur False à la fin de l'animation. JavaScript est à thread unique, il n'y a donc pas de problème de race.

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

Answer 2

Consultez l'interface utilisateur jQuery . Plus précisément la partie effets du plug-in. J'utilise l'effet de diapositive sur mon site Web personnel (cliquez sur les flèches situées à côté des cases).

J'empêche les utilisateurs de déclencher l'effet plusieurs fois (avant la fin de l'effet) avec un gestionnaire d'événements et une fonction de rappel.

Voici le code source

Answer 3

Au lieu de l'indicateur global associé, vous pouvez attribuer la valeur à l'élément DOM, ce qui permet à plusieurs éléments de la page d'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;
});

Answer 4

Les appels de fonctions JavaScript étant asyncronaux, vous pouvez passer en paramètre in une fonction de rappel appelée à la fin de l'appel précédent (idem pour les erreurs).

Vous pouvez transmettre la fonction que vous avez écrite dans ce message en tant que rappel de la fonction activée auparavant.

J'espère que cela vous aidera.

Cordialement