Geek Answers Handbook

Disable the click event until the animation completes

In my game, I have a grid filled with words. To pronounce the words that the user must click on the letters on the side called "drag". When a letter is clicked, it enlivens the position in the grid.

The problem I am facing is that the user can quickly press letters, which leads to a program crash. To solve this problem, I want to disable click events until the animation completes.

In the past, I used the setTimeOut function before, but this is not a reliable method, as it always depends on the speed of the browser.

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++; } });
+6
source share
2 answers

You can do this in three simple steps.

  • Declare a global variable named animationComplete and set it to false .

     var animationComplete = false;

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

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

  • Verify completeness using a 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/

The script for your code is here: http://jsfiddle.net/smilburn/Dxxmh/94/

+7
source

It is not possible to verify the atm code, but checking that the element is not animated inside the click function should do

 if(!$('selector:animated')){ }
+1
source

More articles:


All Articles