Comment faire en sorte qu'un seul gestionnaire d'événements s'appelé quand sélectionner des boutons radio très rapide?

Question

Si j'ai des boutons radio:

<input id="y0" type="radio" name="myRadioBtns" value="a" checked> <label for="y0"></label>
<input id="y1" type="radio" name="myRadioBtns" value="b">  <label for="y1"></label>
<input id="y2" type="radio" name="myRadioBtns" value="c">  <label for="y2"></label>

Pour vous assurer que l'événement « changement » est uniquement lié aux boutons radio une fois, je l'ai fait quelque chose comme ceci:

var $el = $('input[name='myRadioBtns']');

if(!($el.data('events') && $el.data('events').change)) {

   $el.change(function() {
       //EVENT HANDLER
   });
}

Les choses bien à ce stade, l'événement « changement » n'est lié à mes boutons radio une fois.

Mais, je veux aussi l'événement gestionnaire s'appelé une seule fois. Ce que je veux dire est, si je sélectionne un bouton radio, mon gestionnaire d'événements sera appelé, il est alors en attente de la réponse du côté serveur qui prend 5 secondes parfois, pendant les 5 secondes, si le changement d'utilisateur pour sélectionner un autre bouton radio, l'événement change gestionnaire sera appelé nouveau

Ma question est de savoir comment assurer que le gestionnaire d'événements get invoqué qu'une seule fois, c'est comment désactiver le bouton radio de la sélection lorsque le gestionnaire d'événements « changement » est déjà tiré?

Answer 1

$el.change(function() {
    $(this).prop("disabled",true);
    $.ajax({
        url: ajax_url,
        ...
        success: reenableRadio
    });
}); 

function reenableRadio() {
    $el.prop("disabled",false);
}

Answer 2

Si vous utilisez .ajax $ de jQuery, avez-vous essayé de faire une demande synchrone?

$.ajax({
    type:'GET',
    async:false, // add this one 
    success: function() { 

    }

});

Cela devrait bloquer les choses de se produire.

"Notez que les requêtes synchrones peuvent verrouiller temporairement le navigateur, désactiver toutes les actions alors que la demande est active. » http://api.jquery.com/jQuery.ajax/

Bien que cela puisse être la solution la plus simple, le blocage de l'interaction d'un site Web est généralement une mauvaise pratique. Il serait plus idéal pour simplement:

    $.ajax({
        beforeSend: function() { 
            $('input[name=myRadioBtns]').prop('disabled',true);
        }, 
        success: function() { 
            $('input[name=myRadioBtns]').prop('disabled',false);
        } 
    });

Answer 3

Si vous voulez dire que vous voulez que le bouton radio est désactivé pendant toute la durée de tout ce qui se passe dans votre gestionnaire d'événements, puis devenir à nouveau activé, vous pouvez le désactiver d'abord, et l'activer à nouveau dans le rappel de votre appel AJAX (I « m en supposant que vous avez un appel d'AJAX dans votre gestionnaire d'événements parce que vous avez dit que vous attendez 5 secondes pour la réponse du serveur):

$el.change(function() {
    var radio = $(this);
    radio.prop("disabled", true);
    $.post("somescript.php", function() {
        radio.prop("disabled", false);
    });
});

En outre, je suppose qu'il est juste une erreur lors de la rédaction de la question, mais notez que le code dans votre question a une erreur de syntaxe, (vérifiez les guillemets):

var $el = $('input[name='myRadioBtns']'); //Should be [name="myRadioBtns"]

Answer 4

Vous pouvez désactiver les boutons radio lors de la demande et les réactiver à la fin de la demande.

Si vous n'êtes pas autorisé à les désactiver, vous pouvez utiliser cette méthode:

var radioRequestSend = false;
$el.change(function() {
    // if 
    if (radioRequestSend) return false;

    // fire your ajax request and set radioRequestSend to true
    radioRequestSend = true;
});

in your ajax response handler reset radioRequestSend to false.

:)