当选择单选按钮非常快时，如何确保只调用一个事件处理程序？ [英] how to make sure only one event handler get called when select radio buttons very fast?

问题描述

如果我有单选按钮：

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

为了确保更改事件仅绑定到单选按钮一次，我做了一些事情像这样：

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.

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

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);
}

这篇关于当选择单选按钮非常快时，如何确保只调用一个事件处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！