jquery klickt schnell

Question

Ich habe diese Funktion, die 31px zu meinem Stil unten auf ul hinzufügt. Es funktioniert gut, aber wenn ich schnell klicken, fügt es nicht mehr 31px, aber einige seltsame Zahl wie 17.423px. Ich vermute, es ist, weil die Animation nicht getan ist, und dadurch durch Klicken schnell es 31px auf die aktuelle px Menge hinzufügt. Mein Gedanke ist, dass ich ein stop() einfügen müssen. Aber wo?

$(function () {
        $('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function () {
            if ($("ul").css("bottom") !== '2728px') {
                $(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({
                    bottom: '+=31'
                }, 200);
            }
        });
    });

Answer 1

Die Animationen stehen in der Warteschlange, aber es könnte sein, dass die zu animierenden Werte berechnet werden, bevor die Animation in die Warteschlange gestellt wird, und da Sie einen relativen Wert verwenden, würde die Animation von der aktuellen Position aus berechnet.

Sie haben bereits eine stop Aufruf im Code. Ich weiß nicht, ob Sie das nachträglich hinzugefügt haben, sonst könnte das auch die Werte erklären. Wenn Sie die Animation auf halber Strecke anhalten, wird der untere Wert natürlich auf halber Strecke geändert.

Sie könnten den aktuellen Zielwert in einer Variablen speichern, so dass Sie einen absoluten Wert für die Animation angeben können:

$(function () {

   var current = 0;

   $('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function () {
      if (current < 2728) {
         current += 31;
         $(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({
            bottom: current + 'px'
         }, 200);
      }
   });
});

Auf diese Weise können Sie die stop aufrufen, damit die neue Animation die vorherige ersetzt und nicht in die Warteschlange gestellt wird.

Answer 2

Ich würde wahrscheinlich versuchen zu verhindern, dass die Funktion ausgelöst wird, wenn man sich bereits im Flug befindet. Etwas wie dies könnte funktionieren:

$(function () { 
        $('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function () { 
            if ($(this).data('in_flight') === true){ 
                return false;
            } else {
                if ($("ul").css("bottom") !== '2728px') {
                    $(this).data('in_flight', true);
                    $(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({
                        bottom: '+=31'
                    }, 200);
                    $(this).data('in_flight', false);
                }
            }
        });
    });

Ein komplizierterer Ansatz wäre es, die Klicks zu zählen und sie in eine Warteschlange zu stellen (wobei der nächste Klick ausgelöst wird, nachdem die aktuell laufende Funktion beendet ist). Sie könnten dafür ähnlichen Code verwenden.