Disable click event until animation completes

Question

In my game I have a grid populated with words. To spell the words the user has to click on the letters on the side called "drag". When a letter is clicked it animates into position on the grid.

The problem I am having is that the user can click letters rapidly, which crashes the program. To solve this I want to disable the click events until the animation completes.

In the past I have used a setTimeOut function before but it is not a reliable method as the timing all depends on browser speeds.

Here is the click event:

$('.drag').on('click', function (e) {
    e.preventDefault();
    var target = $('.highlight-problem .drop-box:not(.occupied):first');
    var targetPos = target.parents('td').position();
    console.log(targetPos);
    var currentPos = $(this).offset();
    var b = $(this);
    if (target.length) {
        target.addClass("occupied");
        $(".occupied").parent(".flip-wrapper").addClass("flipped");
        var clonedObject = b.clone()
        if (b.data("letter") == target.parents('td').data("letter")) {
            clonedObject.addClass("right-letter");
            target.addClass('right-letter');
            setTimeout(function () {
                hitSound.play();
            }, 550);
        } else {
            clonedObject.addClass("wrong-letter");
            target.addClass('wrong-letter');
            setTimeout(function () {
                missSound.play();
            }, 550);
        }
        clonedObject.appendTo("table").css({
            position: "absolute",
            top: currentPos.top,
            left: currentPos.left
        }).stop().animate({
            top: targetPos.top,
            left: targetPos.left
        }, "slow", function () {
            $(this).prop('disabled', false).css({
                top: 0,
                left: 0
            }).appendTo(target);
            var spellWord = $('.highlight-problem .drop-box');
            if (!spellWord.filter(':not(.occupied)').length) {
                var wordIsCorrect = 0;
                spellWord.each(function () {
                    if ($(this).parents('td').data("letter") == $(this).find("div").data("letter")) {
                        console.log('letter is: ' + $(this).find("div").data("letter"))
                        wordIsCorrect++;
                    }
                });

possible duplicate of [jQuery - Disable Click until all chained animations are complete](http://stackoverflow.com/questions/1271828/jquery-disable-click-until-all-chained-animations-are-complete) **API** `.is(':animated')` **or** `$(':animated').length` might help! `:)` — Tats_innit, Nov 06 '12 at 09:18
how about displaying a loading spinner till the animation completes? — TRR, Nov 06 '12 at 09:18
create a variable which is set at the end of the animation and wrap the functions which runs on click in an if statement which checks if the variable has been set and only runs if it has. — Sean Lang, Nov 06 '12 at 09:18

Praveen Kumar Purushothaman · Accepted Answer · 2012-11-06T10:01:40.200

8

You can do it in simple 3 steps.

Declare a global variable called animationComplete and set it to false.
```
var animationComplete = false;
```

In your .animate({...}); function, toggle the value after the animation is complete.

.animate({
    top: targetPos.top,
    left: targetPos.left
}, "slow", function () {
    ...
    animationComplete = true;
});

Check for the completeness using the global variable.
```
if (animationComplete)
{
    // Do something!
}
```

Full Code

JavaScript

animationComplete = true;
$(document).ready(function(){
    animationComplete = false;
    $(".background").animate({
        height: 50,
        width: 50
    }, 10000, function(){
        animationComplete = true;
    });
    $("button").click(function(){
        if (animationComplete)
            $(".background").animate({
                height: 200,
                width: 200
            }, 10000, function(){
                animationComplete = false;
            });
        else
            alert("Please wait till the animation is complete!");
    });
});

HTML

<div class="background"></div>
<button>Click me!</button>

CSS

.background {background: red;}

Fiddle: http://jsfiddle.net/KAryP/

Fiddle for your code here: http://jsfiddle.net/smilburn/Dxxmh/94/

edited Nov 06 '12 at 10:01

answered Nov 06 '12 at 09:17

Praveen Kumar Purushothaman

154,660
22
177
226

Could you show it in relation to my code. Can't seem to get it working @Praveen Kumar – Milo-J Nov 06 '12 at 09:30
Okay, can I get your full code in a [jsFiddle](http://jsfiddle.net) or something? – Praveen Kumar Purushothaman Nov 06 '12 at 09:36
@Milo-J What am I supposed to drag to where? Nothing is happening when I try to drag! :( – Praveen Kumar Purushothaman Nov 06 '12 at 09:42
Sorry its click event not drag. At the moment there is no pictures to help but it you click rapidly you will see the error @Praveen Kumar – Milo-J Nov 06 '12 at 09:44
I am getting `null` in my console. Not able to perform any action @Milo-J. – Praveen Kumar Purushothaman Nov 06 '12 at 09:48
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19144/discussion-between-milo-j-and-praveen-kumar) – Milo-J Nov 06 '12 at 09:49
@Milo-J I have added the fiddle in the answer. – Praveen Kumar Purushothaman Nov 06 '12 at 10:02

score 1 · Answer 2 · answered Nov 06 '12 at 09:18

1

Can't test code atm, but checking if the element is not animated within click function should do

if(!$('selector:animated')){


}

answered Nov 06 '12 at 09:18

Ohgodwhy

44,803
8
64
95

Disable click event until animation completes

2 Answers2

You can do it in simple 3 steps.

Full Code

Fiddle: http://jsfiddle.net/KAryP/

Fiddle for your code here: http://jsfiddle.net/smilburn/Dxxmh/94/