Comment empêcher l'appelant de fr gestionnaire d'événement deux fois rapidement sur des clics?

Il y a un bouton et lorsque l'utilisateur clique sur le bouton, certaines données sont enregistrées dans le back-end. Problème est lorsque l'utilisateur clique sur le bouton très rapidement, le gestionnaire d'événements est arriver exécutée plusieurs fois.

C'est le code

var x = 1;
$('#button').click(function() {
  //Do something
  //Save some data on network
  x++;
  console.log(x);
});

Je veux que ce gestionnaire pour être exécuté lorsque l'utilisateur clique sur le bouton une seule fois. Même En cas de double ou triple clic, ce devrait être exécutée qu'une seule fois. Je veux juste éviter de clics, ce gestionnaire peut obtenir de nouveau exécutée, bien sûr

J'ai plusieurs solutions dans mon esprit comme

  1. Définir une variable globale comme IS_BUTTON_HANDLER_WORKING = false et quand vous entrez dans le gestionnaire d'ensemble et à la fin, elle est définie sur false nouveau. Et vérifier si cela est vrai, juste retour de la fonction.
  2. Détacher le gestionnaire dans le début et la rattacher à la fin.

Considérer que vous avez 25 boutons dans votre application. Quelle devrait être la meilleure approche pour mettre en œuvre cette.

Prendre un coup d'oeil à ce Violon

Solution

$('#button').click(function() {
   $(this).attr('disabled', true);
  //Do something
  //Save some data on network
  $(this).removeAttr('disabled');
});

À l'aide de cela, nous sommes sûrs que notre gestionnaire suivant sera exécuté uniquement lors de l'exécution précédente a été fait.

Essayez d'utiliser one('click', fn) au lieu de click
Je ne pense pas que one est la bonne réponse parce que le gestionnaire ne sera pas obtenir de nouveau exécutée. Vous pouvez soumettre le formulaire avec des données mises à jour à nouveau après un certain temps.

OriginalL'auteur sachinjain024 | 2013-11-29