jQuery zapobiega wielokrotnym kliknięciom, dopóki animacja nie zostanie wykonana.

Question

Obecnie mam konfigurację, w której użytkownik klika obraz i opiera się na tym obrazie, div zaniknie/zaniknie.

Jeśli użytkownik wpada w szał i klika kilka obrazów jednocześnie, ładuje się wiele elementów div zamiast ostatniego.

Próbowałem zilustrować mój problem tutaj. http://jsfiddle.net/BBgsf/

Kliknięcie dowolnego z tych obrazów spowoduje załadowanie odpowiedniego elementu div z numerem. Ale jeśli klikniesz na różne obrazy przed zakończeniem animacji, to załaduje również inne elementy div.

jQuery

$(".flow-chart img").click(function() { 

    var div_class = $(this).data("class"); 

    $(".hide_show:visible").fadeOut('slow', function() { 
     $("."+div_class).fadeIn("slow"); 
    }); 

}); 

HTML

<div class="1 hide_show">1</div> 
<div class="2 hide_show" style="display: none">2</div> 
<div class="3 hide_show" style="display: none">3</div> 

Jak mogę zapobiec wielu div ładowanie, a nie tylko jeden na raz?

Answer 1

Jednym ze sposobów, aby to zrobić, aby śledzić, czy animacja jest obecnie aktywne. Oto prosty sposób, aby to zrobić: http://jsfiddle.net/QCWgR/

var active = false; 

$(".flow-chart img").click(function() { 
    if (active) { 
     return; 
    } 
    active = true;   
    var div_class = $(this).data("class"); 

    $(".hide_show:visible").fadeOut('slow', function() { 
     // note the callback that sets active to false at end of animation 
     $("."+div_class).fadeIn("slow", function() { active = false; }); 
    }); 

}); 

Dzięki takiemu podejściu, pierwsze kliknięcie musi zakończyć cykl animacji, zanim następny stanie.

Korzystanie zamknięcie utrzymać aktywny z globalnej przestrzeni nazw

Aby utrzymać aktywny z globalnej przestrzeni nazw można uruchomić cały blok wewnątrz anonimowej zamknięcia tak:

http://jsfiddle.net/QCWgR/2/

(function() { 
    var active = false; 

    $(".flow-chart img").click(function() { 
     if (active) { 
      return; 
     } 
     active = true;   
     var div_class = $(this).data("class"); 

     $(".hide_show:visible").fadeOut('slow', function() { 
      $("."+div_class).fadeIn("slow", function() { active = false; }); 
     }); 

    }); 
})();​ 

Answer 2

Choć masz już odpowiedź. Możesz po prostu sprawdzić, czy są jakieś elementy, które są animowane przy użyciu selektora .. i jeśli istnieje powrót false

$(".flow-chart img").click(function() { 
    if ($(".hide_show").filter(':animated').length > 0) { 
     return false; 
    } 
    var div_class = $(this).data("class");  
    $(".hide_show:visible").fadeOut('slow', function() { 
     $("." + div_class).fadeIn("slow"); 
    }); 

});​ 

http://jsfiddle.net/FaKBs/