jQuery एनीमेशन पूरा होने तक एकाधिक क्लिक को रोकता है

Question

वर्तमान में मेरे पास कुछ सेटअप है जहां कोई उपयोगकर्ता छवि पर क्लिक करता है और उस छवि के आधार पर, एक div fade/fade out।

यदि उपयोगकर्ता एक ही समय में छवियों के समूह पर पागल हो जाता है और क्लिक करता है, तो केवल अंतिम अनुरोध किए गए बजाय कई divs लोड होते हैं।

मैंने अपनी समस्या को यहां स्पष्ट करने की कोशिश की है। http://jsfiddle.net/BBgsf/

उन छवियों में से किसी एक पर क्लिक करने से संबंधित div को संख्या के साथ लोड किया जाएगा। लेकिन अगर आप एनीमेशन पूरा होने से पहले विभिन्न छवियों पर क्लिक करते हैं, तो यह अन्य divs भी लोड करता है।

jQuery

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

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

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

}); 

एचटीएमएल

<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> 

कैसे मैं नहीं बल्कि सिर्फ एक से लोड हो रहा है एक समय में से कई divs रोका जा सकता है?

Answer 1

एक तरह से यह करने के लिए करता है, तो एक एनीमेशन वर्तमान में सक्रिय है का ट्रैक रखने के लिए है। यहाँ यह करने के लिए एक आसान तरीका है: 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; }); 
    }); 

}); 

इस दृष्टिकोण के साथ, पहले क्लिक एनीमेशन चक्र से पहले अगले एक होगा पूरा करने के लिए है।

बंद का उपयोग करते हुए ग्लोबल नेम स्पेस से बाहर सक्रिय रखने के लिए

ग्लोबल नेम स्पेस से बाहर सक्रिय रखने के लिए तुम इतनी तरह एक गुमनाम बंद के अंदर पूरे ब्लॉक चला सकते हैं:

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

हालांकि आपको पहले से ही एक जवाब मिला है .. आप यह देखने के लिए जांच सकते हैं कि :animated चयनकर्ता का उपयोग कर एनिमेटिंग कर रहे हैं या नहीं .. और यदि झूठी वापसी है

$(".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/