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

【问题标题】：How to make sure only one event handler get called when select radio buttons very fast?如何确保在快速选择单选按钮时只调用一个事件处理程序？
【发布时间】：2011-11-12 04:37:18
【问题描述】：

如果我有单选按钮：

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

为了确保“更改”事件只绑定到单选按钮一次，我做了这样的事情：

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

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

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

目前情况很好，“更改”事件只绑定到我的单选按钮一次。

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

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

【问题讨论】：

jQuery 有一个 .one() 方法可以做这样的事情：api.jquery.com/one 但是，我认为你真正想要做的是禁用单选按钮 onChange，然后重新启用它们AJAX 请求完成。对吗？
您好 mblase75，是的，这正是我所需要的。

标签： javascript jquery jquery-selectors jquery-events

【解决方案1】：

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

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

【讨论】：

我正在使用 jQuery 1.5.1，它抱怨 prop 不是函数，所以我改用 .attr('disabled',false) 。
我认为您需要将其更改为 .attr("disabled","disabled") 和 .attr("disabled","")。（.prop 是在 jQuery 的 1.6.x 版本中添加的。）
是的，我就是这么做的。谢谢。

【解决方案2】：

如果您使用 jQuery 中的 $.ajax，您是否尝试过使其成为同步请求？

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

    }

});

这应该阻止事情发生。

"注意同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。”http://api.jquery.com/jQuery.ajax/

虽然这可能是最简单的解决方案，但阻止网站交互通常是不好的做法。这样做会更理想：

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

【讨论】：

同步请求会阻塞UIThread，阻塞用户交互。 :)
IIRC 你必须使用.attr('disabled','disabled') 和.attr('disabled','') 或.prop('disabled',true) 和.prop('disabled',false)。如果使用 jQuery 1.6.2 或更高版本，.prop 更可取。
抱歉，是的，它是 jQuery 1.6（或 1.6.2+？）的道具。但是，他们的 .prop 页面 (api.jquery.com/prop) 上的示例是 $("input").prop("disabled", false);。

【解决方案3】：

如果您的意思是希望在事件处理程序中发生的任何事情期间禁用单选按钮，然后再次启用，您可以先禁用它，然后在 AJAX 调用的回调中再次启用它（我'我假设你的事件处理程序中有一个 AJAX 调用，因为你说你正在等待 5 秒等待服务器的响应）：

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

另外，我假设这只是写问题时的一个错误，但请注意您问题中的代码有语法错误，（检查引号）：

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

【讨论】：

【解决方案4】：

您可以在请求期间禁用单选按钮，并在请求完成时重新启用它们。

如果不允许禁用它们，可以使用这种方法：

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.

【讨论】：