Problème sur jquery avec fonction asynchrone

[emualliug]

Bonjour à tous,

J'ai un soucis sur un script, je sens vaguement d'où vient le problème, mais je ne vois pas trop comment le résoudre. Je mets la partie pertinente du code :

$('.bouton').click( function (){
    button = this;
    button.disabled = true;
     
    $.ajax({
        //sans surprise
    })
    .always(function(){
        button.disabled = false;
    });

});

C'est sans grande originalité, j'ai une page avec un certain nombre de boutons, et je veux exécuter une action côté serveur en AJAX. Je vous ai pas mis la partie AJAX qui est sans surprise et ne pose pas problème, les data envoyées dépendent d'un attribut data- différent à chacun des boutons que je récupère aisément. Jusque là, pas de difficulté, ça fonctionne.

Le problème, c'est la façon dont le .always() est traité au retour de l'appel AJAX. Si ça prend un peu de temps et que l'utilisateur a cliqué sur un autre bouton avant que la première requête soit finie (ce que je ne souhaite pas interdire), ce sera cet autre bouton qui sera traité lors de l'appel à la fonction always(). En conséquence le premier bouton ne sera jamais réactivé, alors que le second bouton sera réactivé trop tôt.

 

[spout]

button = this;

Tu crées window.button et à chaque click ça écrase le précédent. Il faut mettre :

let button = this;

 

[emualliug]

Mais oui ! Merci !

Je suis décidément moins à l'aise avec JavaScript, c'est tout bête, mais je n'y aurais pas pensé.

Pour compléter, mon objectif initial était également de pouvoir tempérer le caractère actif du bouton, pour éviter les double-clics malencontreux et rendre plus apparent l'action côté UX, avec un setTimout sur le always() :

    .always(function(){
        setTimeout(function(){
            button.disabled = false;
        }, 500);
    });

Et désormais ça marche parfaitement ! Merci encore.