¿Cómo asegurarse de que solo se llame a un controlador de eventos cuando seleccione botones de opción muy rápido?

Question

Si tengo botones de opción:

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

Para asegurarme de que el evento "cambiar" solo esté vinculado a los botones de opción una vez, hice algo como esto:

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

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

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

Las cosas están bien en este punto, el evento "cambiar" solo está vinculado a mis botones de opción una vez.

PERO, también quiero que se llame al controlador de eventos solo una vez.Lo que quiero decir es que, si selecciono un botón de opción, se llamará a mi controlador de eventos, luego estará esperando la respuesta del lado del servidor, que a veces demora 5 segundos, durante los 5 segundos, si el usuario cambia para seleccionar otro botón de opción, el evento de cambio¡Se llamará al controlador de nuevo !

Mi pregunta es cómo asegurarme de que el controlador de eventos se invoque solo una vez, así es como deshabilitar el botón de opción de la selección cuando el controlador de eventos "cambiar" ya está activado.

Answer 1

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

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

Answer 2

Si está usando $ .ajax de jQuery, ¿ha intentado convertirlo en una solicitud sincrónica?

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

    }

});

Eso debería impedir que sucedan cosas.

"Tenga en cuenta que las solicitudes sincrónicas pueden bloquear temporalmente el navegador, deshabilitar cualquier acción mientras la solicitud está activa ". http://api.jquery.com/jQuery.ajax/

Si bien esta puede ser la solución más simple, bloquear la interacción con el sitio web generalmente es una mala práctica.Sería más ideal simplemente hacer:

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

Answer 3

Si quiere decir que desea que el botón de radio esté deshabilitado mientras dure lo que suceda en su controlador de eventos, y luego vuelva a habilitarlo, puede deshabilitarlo primero y habilitarlo nuevamente en la devolución de llamada de su llamada AJAX (ISupongo que tiene una llamada AJAX en su controlador de eventos porque dijo que estaba esperando 5 segundos la respuesta del servidor):

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

Además, supongo que es solo un error al escribir la pregunta, pero tenga en cuenta que el código de su pregunta tiene un error de sintaxis (consulte las comillas):

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

Answer 4

Puede deshabilitar los botones de opción durante la solicitud y volver a habilitarlos cuando se complete la solicitud.

Si no tiene permiso para deshabilitarlos, puede usar este método:

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.

:)