Comment désactiver un élément cliquable après qu'un utilisateur clique dessus?

Question

donc si vous avez un bouton favori comme sur SO, alors l'utilisateur pourrait continuer à cliquer et le truc préféré continuerait à éteindre et ainsi de suite.

mais, il semble qu'il y ait une condition de course en raison d'un clic rapide et que les choses commencent à être drôles et qu'ils redeviennent normaux une fois que j'ai rafraîchi la page. Le problème semble plus être du côté de l'interface utilisateur que du backend, mais je ne peux pas déboguer, car cela donne le temps au programme et la condition de course est partie.

J'ai SET NOCOUNT ON; dans ma procédure SQL, au cas où vous vous demandez.

Donc, une fois que l'utilisateur clique sur le bouton "favori", quelles mesures dois-je prendre pour m'assurer qu'il ne cliquera pas dessus jusqu'à ce que nous entendions de la demande Ajax?

Je suis en contact avec la base de données pour chaque faire ou défaire de favori ... est-ce mauvais? (Pas lié à ma première question, je suppose)

Answer 1

Pseudo-code:

anchors = [DOMElement, DOMElement]; 

anchors.each(function() { 

var clickable = true; 

el.onclick = function() { 
    if (clickable) { 
     clickable = false; 
     ajaxStuff({ 
     done: function(){ 
      clickable = true; 
     } 
     }) 
    } 
}); 

Fondamentalement, invoquer une fonction dans le contexte de chacun de ces éléments, définir une variable cliquable, sur clic exécuter si cliquable est vrai, alors mettez-le à false, et remettez-le sur ajax done.