Esecuzione di jQuery onClick

Question

Ho questo bit di javascript scritto con jQuery 1.2.5. È contenuto all'interno della funzione principale () di un plugin che ho scritto. Il plugin è uno scroller orizzontale per gallerie molto simile a jCarousel. Fa un sacco di calcolo automatico delle larghezze e determina quanti scorrere in base a quello e alle dimensioni delle immagini, che è ciò che tutti i calcoli stanno succedendo.

Qual è la mia domanda, come posso evitare che scoppi prima che sia terminata una precedente esecuzione. Ad esempio, se ottengo un piccolo clic felice e schiaccio freneticamente .digi_next . Le cose non vanno così bene nell'interfaccia utente quando ciò accade e mi piacerebbe risolverlo :) Pensavo che la risposta potesse trovarsi nella coda , ma tutti i miei tentativi di usarla non sono cambiati fuori qualcosa di utile.

    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

Usa solo un flag di occupato globale. Quando inserisci il gestore di clic, controllalo e procedi solo se è falso. Impostalo immediatamente su true, quindi ripristinalo su false al termine dell'animazione. JavaScript è a thread singolo, quindi non ci sono condizioni di competizione di cui preoccuparsi.

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

Answer 2

Dai un'occhiata a UI jQuery . In particolare la parte degli effetti del plug-in. Uso l'effetto diapositiva su il mio sito web personale (fai clic sulle frecce ai lati delle caselle).

Impedisco agli utenti di attivare l'effetto più di una volta - prima che l'effetto si sia concluso - con uno gestore di eventi e una funzione di richiamata.

Ecco il codice sorgente

Answer 3

In alternativa al flag globale menzionato, è possibile assegnare il valore all'elemento DOM, in questo modo consentendo a più elementi nella pagina di avere lo stesso comportamento:

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

Answer 4

Poiché le chiamate delle funzioni JavaScript sono asincrone, è possibile passare come parametro in una funzione di callback che viene chiamata al termine della chiamata precedente (stessa per errori).

Puoi passare la funzione che hai scritto in questo post come callback per la funzione precedentemente attivata.

Spero che questo aiuti.

Saluti