Disable click event until animation completes

javascript, jquery

Solution

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/

Problem

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

Original source

Related problems