jQuery onClick Ausführung


1

Ich habe dieses Bit von Javascript mit jQuery 1.2.5 geschrieben. Es ist in der Hauptfunktion() eines Plugins enthalten, das ich geschrieben habe. Das Plugin ist ein horizontaler Galerie-Scroller, der jCarousel sehr ähnlich ist. Es macht viele automatische Berechnung von Breiten und bestimmt, wie viele auf dieser und der Größe der Bilder zu scrollen, was ist, was alle Berechnungen sind, die vor sich gehen.

Was meine Frage ist, wie kann ich verhindern, dass dies abfeuert, bevor eine vorherige Ausführung beendet ist. Zum Beispiel, wenn ich einen kleinen Klick glücklich und gerade hektisch auf breie. Die Dinge laufen nicht so gut in der Benutzeroberfläche, wenn das passiert, und ich würde es gerne beheben :) Ich dachte, die Antwort könnte in queue liegen, aber alle meine Versuche, es zu benutzen, haben sich nicht gelohnt.

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

Vielen Dank!

  0

side note : Ich würde jQuery v1.2.6 wärmstens empfehlen, da das Release für 1.2.5 manipuliert wurde und 1.2.6 wichtige Bugfixes hat. 23 sep. 082008-09-23 18:53:32

  0

Ich werde mich darum kümmern, danke. Ich habe nur 1.2.5 benutzt, weil es in unserer Lösung ist und nicht wirklich die Macht hat, es zu ändern, aber ich weiß, wer ...>.> 23 sep. 082008-09-23 19:00:55

10

Verwenden Sie einfach eine globale beschäftigt Flagge. Wenn Sie Ihren Klick-Handler eingeben, prüfen Sie ihn und fahren Sie nur fort, wenn er falsch ist. Setzen Sie es sofort auf "true" und setzen Sie es nach dem Ende der Animation auf "false" zurück. JavaScript ist single-threaded, daher gibt es keine Race-Bedingung, über die man sich Sorgen machen muss.

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

1

Da JavaScript-Funktionen asyncron sind, können Sie als in-Parameter eine Callback-Funktion übergeben, die beim Beenden des vorherigen Aufrufs aufgerufen wird (das gleiche gilt für Fehler).

Sie können die Funktion, die Sie in diesem Beitrag geschrieben haben, als Rückruf für die Funktion übergeben, die zuvor ausgelöst wurde.

Hoffe, das hilft.

Mit freundlichen Grüßen


5

Werfen Sie einen Blick auf jQuery UI. Speziell the effects-part des Steckers. Ich verwende den Slide-Effekt auf my personal website (klicke auf die Pfeile an den Seiten der Boxen).

Ich verhindere, dass Benutzer den Effekt mehr als einmal auslösen - bevor der Effekt beendet wird - mit der one event-handler und einer Callback-Funktion.

Here's the source-code


2

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