Comment empêcher le spam de déclencher des événements?

Question

Je regardais le codepen suivant et je me demandais comment vous pouvez arrêter le clic de spam, par exemple, si vous cliquez plusieurs fois à la fois, l'animation commence à gâcher.

Comment puis-je empêcher cela? Aurait-il simplement un travail conditionnel? J'ai essayé, mais je ne pouvais pas le faire fonctionner. Comment puis-je obtenir l'animation pour continuer à jouer et empêcher l'interaction de l'utilisateur, jusqu'à ce qu'il soit terminé.

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

Answer 1

Si vous voulez être agnostique du fait que l'animation est jouée par CSS ou JS, il n'y a qu'une seule solution. Vous devez savoir combien de temps dure votre animation et utiliser un setTimeout. Par exemple:

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