javascript - 如何确保在快速选择单选按钮时仅调用一个事件处理程序？

Question

如果我有单选按钮:

<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>

为了确保“更改”事件仅绑定(bind)到单选按钮一次，我做了如下操作:

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

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

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

此时一切都很好，“更改”事件仅绑定(bind)到我的单选按钮一次。

但是，我也希望事件处理程序仅被调用一次。我的意思是，如果我选择一个单选按钮，我的事件处理程序将被调用，然后等待服务器端的响应，有时需要 5 秒，在这 5 秒内，如果用户更改为选择另一个单选按钮，则更改事件处理程序将再次被调用!

我的问题是如何确保事件处理程序仅被调用一次，这就是如何在“更改”事件处理程序已触发时禁用单选按钮的选择？

Answer 1

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

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