How can I prevent a bug/glitch that occurs with multiple clicks during fade?

Question

Yes, this question has been answered quite a few times:

jQuery disable enable click event with fade jQuery prevent multiple clicks until animation is done Disabling clicking when using .fadeOut() in jQuery jQuery - Disable Click until all chained animations are complete

And the list can probably go on and on. But I can't seem to get any of these to work with my code!

$(document).ready(function(){
$('#firstNewMap,li.linkToSecondMap').click(function(e){
    $('div#mainMap').fadeOut('slow', function(){
        $('div#secondMap').fadeIn('slow');
    });
    $("#tagWrap").collapse('hide');
    $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
    $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");
});
});

HTML code where li.linkToSecondMap is located:

<div id="mainLinks">
     <li ng-repeat="x in mainLinks" class="myList {{x.id}}"><a href="{{x.link}}">{{x.name}}</a></li>
</div>

{{x.id}} is linkToSecondMap

The code is otherwise working perfectly fine. I had just recently noticed that if you click too fast, you get both of the images of the map (div#mainMap and div#secondMap) but nothing else of the other stuff that also gets swapped, but perhaps because they are not fading.

You are looking for `.stop( [clearQueue ] [, jumpToEnd ] )`. [Check jQuery Docs](https://api.jquery.com/stop/) — kosmos, Apr 14 '15 at 15:20

score 0 · Answer 1 · answered Apr 14 '15 at 15:44

You can try the following workaround.

var timeoutClick = true;
$(document).ready(function(){
    $('#firstNewMap,li.linkToSecondMap').click(function(e){
        if (timeoutClick) {
            $('div#mainMap').fadeOut('slow', function(){
                $('div#secondMap').fadeIn('slow');
            });

            $("#tagWrap").collapse('hide');
            $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
            $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");

            timeoutClick = false;
            setTimeout(function(){ 
                timeoutClick = true;
            }, 1000);
        }
    });
});

This one didn't work for me either. No error or anything. I don't understand how there can be so many solutions to this problem but none of them are solving mine. This is the only JQuery being used. :( — Christine268, Apr 15 '15 at 15:08
Do you have jQuery reference? Can you debug it with the console? Are you able to enter in the `if (timeoutClick) { ... }` block? — Marin Takanov, Apr 15 '15 at 15:14

Christine268 · Answer 2 · 2015-06-09T20:19:35.013

Fixed it:

$(document).ready(function(){
$('#firstNewMap,li.linkToSecondMap').click(function(e){
    $('div#mainMap').fadeOut('slow', function(){
    $("#tagWrap").collapse('hide');
    $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
    $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");
        $('div#secondMap').fadeIn('slow');
    });
});
});

I ran into the problem again later down the road when things were changed and updated. Here is my new code with new fix using comment suggestions from original post:

var $map = $('.'+initialOut+'Map');

    $map.stop().fadeOut('slow',function(){
        $('.'+initialOut+'Details,.bkbtn'+backOut).css("display","none");
        $('.'+initialIn+'Details,.bkbtn'+backIn).css("display","block");
        $('.noQuery').css("display","none");
        $("#buildingHeader").html(name);
        $('.'+initialIn+'Map').fadeIn('slow').css("display","block");
    });

This causes the first click's animation to stop in its track and instead it completes the second animation. Simple.

How can I prevent a bug/glitch that occurs with multiple clicks during fade?

2 Answers2