How to make sure only one event handler get called when select radio buttons very fast?

If I have radio buttons :

<in开发者_开发问答put 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>

To make sure that the "change" event is only bound to the radio buttons once, I did something like this:

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

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

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

Things are fine at this point, the "change" event is only bound to my radio buttons once.

BUT, I also want the event handler get called only once. What I mean is, if I select a radio button, my event handler will get called, it is then waiting for server side's response which takes 5 seconds sometimes, during the 5 seconds, if user change to select another radio button, the change event handler will get called again!

My question is how to make sure the event handler get invoked only once, that's how to disable the radio button from selection when the "change" event handler is already fired?

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

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

If you're using $.ajax from jQuery, have you tried making it a synchronous request?

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

    }

});

That should block things from happening.

"Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active." http://api.jquery.com/jQuery.ajax/

While this may be the simplest solution, blocking website interaction is generally bad practice. It would be more ideal to simply do:

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

If you mean you want the radio button to be disabled for the duration of whatever happens in your event handler, and then become enabled again, you can disable it first, and enable it again in the callback of your AJAX call (I'm assuming you have an AJAX call in your event handler because you said you're waiting 5 seconds for the server's response):

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

Also, I'm assuming it's just a mistake when writing the question, but note that the code in your question has a syntax error, (check the quotes):

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

You can disable the radio buttons during the request and re-enable them on request completion.

If you are not allowed to disable them, you can use this method:

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.

:)