Wie verhindert man, dass eine Animation mehr als einmal abgespielt wird - Jquery

Question

Wenn man schnell eine Taste drückt, die eine Funktion mit Animation auslöst, erhalten wir diese Funktion normalerweise viele Male und die Animation wird nacheinander abgespielt.

Was machen Sie, wenn Sie nicht möchten, dass die Funktion während der Wiedergabe der Animation ausgelöst wird?

Hier ist ein einfaches Beispiel für eine Funktion, die ein Kind zu springen sagt:

$('button').click(jumpKid); 

function jumpKid() { 
$kid 
    .animate({'margin-bottom' : '+=' + 100} , 500) 
    .animate({'margin-bottom' : '-=' + 100} , 500) 
}; 

schnell Drücken der Taste bewirkt, dass das Kind viel Zeit springen.

Ich suche eine jquery/js Lösung (anstatt mit einem var wie "isKidJumping")

Answer 1

Sie :animated Selektor verwenden können, .is()

$("button").click(jumpKid); 

function jumpKid() { 
if (!$kid.is(":animated")) { 
    $kid 
    .animate({'margin-bottom' : '+=' + 100} , 500) 
    .animate({'margin-bottom' : '-=' + 100} , 500) 
} 
}; 

Answer 2

können Sie jQuery verwenden .one() Methode :

$('button').once('click', jumpKid); 

function jumpKid() { 
    $kid 
     .animate({ 
      'margin-bottom': '+=' + 100 
     }, 500) 
     .animate({ 
      'margin-bottom': '-=' + 100 
     }, 500); 
} 

Answer 3

Sie in es kleinen Abständen überprüfen könnten:

setInterval(function() { 
    $("button").click(jumpKid); 
},100); 

oder einfach wechseln zwischen einer sprang Klasse:

$("button").click(function() { 
    kid.removeClass("jumped")); 
} 
if(!kid.hasClass("jumped")) jumpKid(); 

Answer 4

Sie können die Ereignis-Listener lösen, während die Animation abgespielt wird, und als Rückruf auf den letzte .animate() -Methode, re-attach es:

var $button = $('button'); 
$button.on('click', jumpKid); 

function jumpKid() { 

$button.off('click', jumpKid); 
$kid 
    .animate({'margin-bottom' : '+=' + 100} , 500) 
    .animate({'margin-bottom' : '-=' + 100} , 500, function(){ 
     // In a callback function for the last .animate() call, we'll re-attach the event listener: 
     $button.on('click', jumpKid); 
    }); 
}; 

Answer 5

danke für alle Antworten. Ich fand auch eine Lösung, die wirklich einfach zu bedienen und zu verstehen.

$('button').click(function(){ 
    if ($kid.queue().length === 0){ 
    jumpKid(); 
    } 
}); 


function jumpKid() { 
    $kid 
    .animate({'margin-bottom' : '+=' + 100} , 500) 
    .animate({'margin-bottom' : '-=' + 100} , 500) 
} 

$ kid.queue() gibt einen Array zurück, das die Objektanimationen speichert, so $ kid.queue() Länge wird uns zeigen, wie Viele Animationen sind gespeichert.

zum Beispiel:.., Wenn Sie "$ kid.animate ..." verwenden, um die $ kid.queue() Länge 1.

zurückkehren und so können wir $ kid.queue() verwenden, Länge um zu verhindern, dass die JumpKid-Funktion ausgelöst wird! Hurra!