I was looking at the following codepen and i was wondering how you can stop spam clicking, for example, if you click a lot of times at once, the animation starts messing up.

How can I prevent that from happening? Would simply having a conditional work? I tried it but I couldn't get it to work. if isAnimating = true

How do i get the animation to keep playing and prevent user interaction, until its finished.

/?editors=011

I was looking at the following codepen and i was wondering how you can stop spam clicking, for example, if you click a lot of times at once, the animation starts messing up.

How can I prevent that from happening? Would simply having a conditional work? I tried it but I couldn't get it to work. if isAnimating = true

How do i get the animation to keep playing and prevent user interaction, until its finished.

http://codepen.io/Filippo/pen/WvGbJB/?editors=011

• javascript
• jquery
• velocity.js

• Wouldn't this depend on if you do the animation in javascript or css too? – Dane Commented Oct 28, 2015 at 13:57
• I'm assuming so, but more or so interested in the javascript solution. – user3555373 Commented Oct 28, 2015 at 14:08
• Take a look at 'debouncing' or 'throttling'. Example here: benalman./code/projects/jquery-throttle-debounce/examples/… – SlashmanX Commented Oct 28, 2015 at 14:21

1 Answer 1

If you want to be agnostic from the fact that the animation is played by CSS or JS, there's only one solution. You must know how long is your animation and use a setTimeout. For example :

var isAnimating = false;
$('#button').click(function() {
    if (isAnimating) {
        return;
    }

    isAnimating = true;

    // Start animation. Add a css class or do this by javascript or whatever

    // Assuming the animation duration is 2 seconds
    setTimeout(function() {
        isAnimating = false;
    }, 2000);
});