jQuery onClick Ausführung

Question

Ich habe dieses Stück Javascript geschrieben mit jQuery 1.2.5. Es ist in der Hauptfunktion () einen Plugins enthält, die ich geschrieben habe. Das Plugin ist eine horizontale Galerie scroller sehr ähnlich jCarousel. Es tut einer Menge Auto Berechnung von Breiten und bestimmt, wie viele auf das und die Größe der Bilder basierend auf blättern, die, was die Berechnungen alle sind, die sich gehen.

Was meine Frage ist, wie kann ich verhindern, das aus abzufeuern, bevor eine vorherige Ausführung beendet ist. Zum Beispiel, wenn ich ein wenig bekommen glücklich klicken und einfach wie wild auf .digi_next Maische nach unten. nicht so gut in der Benutzeroberfläche gehen Dinge, wenn das passiert und ich möchte um es zu beheben :) Ich dachte, die Antwort in queue liegen könnte, aber alle meine Versuche, es zu benutzen haben nichts lohnt sich herausstellte.

    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

Nur einen globalen Besetzt-Flag verwenden. Wenn Sie Ihre Click-Handler eingeben, überprüfen Sie es, und nur fortfahren, wenn es falsch ist. stellt es sofort wahr, und es dann wieder auf false gesetzt, wenn die Animation endet. JavaScript ist single-threaded, so gibt es keine Race-Bedingung zu befürchten.

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

Answer 2

Hier finden Sie aktuelle jQuery UI . Insbesondere der Effekte-Teil des Steckers in. Verwende ich den Slide-Effekt auf meine persönliche Website (klicken Sie auf die Pfeile an den Seiten der Kästen).

ich verhindern, dass Benutzer die Auslösung der Effekt mehr als einmal - bevor der Effekt beendet wurde - mit dem ein Event-Handler und eine Callback-Funktion.

Hier ist die Source-Code

Answer 3

Als eine Alternative zum afformentioned globalen Flag, Sie den Wert auf das DOM-Element zuordnen könnten, auf diese Weise mehr Elemente auf der Seite ermöglicht, das gleiche Verhalten hat:

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

Answer 4

Da Anrufe JavaScript-Funktionen asyncronus sind, können Sie als einen Pass in Parametern eine Callback-Funktion, die aufgerufen wird, wenn die vorherige Anruf beendet (gleiche Fehler).

Sie können die Funktion übergeben Sie in diesem Beitrag als Callback schrieb für die Funktion, die Feuer vor.

Hope, das hilft.

Viele Grüße