jQuery prevent multiple clicks until animation is done

Question

Currently I have something setup where a user clicks on an image and based off that image, a div will fade in / fade out.

If the user goes crazy and clicks on a bunch of the images at the same time, multiple divs load rather than just the last requested one.

I've tried to illustrate my problem here. http://jsfiddle.net/BBgsf/

Clicking on any of those images will load the corresponding div with the number. But if you click on different images before the animation is completed, it loads the other divs as well.

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>

How can I prevent the multiple divs from loading rather than just one at a time?

score 8 · Answer 1 · answered Dec 04 '12 at 19:50

Though you already got an answer.. You can just check to see if there are any elements that are animating using the :animated selector.. and if there are return 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/

Cymen · Accepted Answer · 2012-12-04T19:07:32.223

One way to do this is to keep track of if an animation is currently active. Here is a simple way to do this: 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; });
    });

});

With this approach, the first click has to complete the animation cycle before the next one will happen.

Using closure to keep active out of global namespace

To keep active out of global namespace you can run the whole block inside an anonymous closure like so:

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

    });
})();

Agreed. I'll update to that. I usually try to do minimal changes to the existing code to get functionality. But keeping active out of global namespace is a really good idea. — Cymen, Dec 04 '12 at 18:57
@Cymen, thank you for your help. I will accept as soon as it lets me. Can you edit your code to reference with SimpleCoder meant. I don't understand what he means by wrapping it in a closure. — Jako, Dec 04 '12 at 19:02
@Jako I've updated the answer with the closure. If it isn't clear, a non-anonymous closure example is here: http://jsfiddle.net/QCWgR/1/ The example in the answer gets rid of `flowChartImageAnimation` so nothing is in the global namespace (it's all wrapped up in the anonymous closure). — Cymen, Dec 04 '12 at 19:09

jQuery prevent multiple clicks until animation is done

2 Answers2

Using closure to keep active out of global namespace

Linked