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
- 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. - 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.
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
Vous devez vous connecter pour publier un commentaire.
David Walsh, qui a une grande solution.
OriginalL'auteur Dorad
Il y a plusieurs façons de traiter cette question:
Vous pouvez
disable
/hide
le bouton après le clic:Vous pouvez également définir un délai d'attente sur chaque clic afin de ne pas exécuter de nouveau:
De sorte que chaque fois que le bouton est cliqué, il ne fait exécuter du code après un
1000 milliseconds
, si le bouton est cliqué dans une succession rapide, le délai d'attente sera effacé et recommencer à nouveau.remarque que ci-dessus n'est pas testé
Personnellement, je pense que les personnes handicapées solution est la meilleure car elle indique à l'utilisateur qu'il a cliqué et il se passe quelque chose, vous pouvez même afficher un chargeur à côté du bouton.
Any global variable
ousetinterval
-> Rend le code peu complexe.Cela ne peut pas désactiver le bouton est cliqué par programmation.
OriginalL'auteur epoch
Comme par modifier
Vous devez utiliser .un()
ou
Vous pouvez
unbind
événement cliquez sur la fonctionOriginalL'auteur Satpal
Vous pouvez faire usage de jQuery un() méthode comme indiqué ici
OriginalL'auteur Vinayak Sakhare
Je suis en utilisant la solution simple ci-dessous et de son été à travailler pour moi bien :
OriginalL'auteur Roy M J
Vous êtes à la recherche pour cette
Ou si u ont besoin d'un certain intervalle de temps s'écouler entre les deux clics.
OriginalL'auteur Ishank Dubey
Essayez le code suivant
OriginalL'auteur Zword
En supposant que vous avez joint et de l'écouteur d'événement pour le bouton, une approche ist suffit d'enlever l'écouteur d'événement à partir du bouton et de l'attacher ensuite à nouveau si nécessaire.
Dans le cas de la fonction d'écouteur elle-même ajouter le code suivant:
En fonction de votre configuration, cela pourrait fonctionner.
OriginalL'auteur Wigglepee