как сделать так, чтобы при выборе переключателей очень быстро вызывался только один обработчик событий? - PullRequest
Новая
       12

как сделать так, чтобы при выборе переключателей очень быстро вызывался только один обработчик событий?

0 голосов
/ 07 сентября 2011

Если у меня есть переключатели: 

<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 секунд, если пользователь переключается на другую радиокнопку, событие changeобработчик будет вызван снова !

Мой вопрос заключается в том, как сделать так, чтобы обработчик событий вызывался только один раз, а именно как отключить переключатель при выборе, когда обработчик события «изменить»уже уволены?

Ответы [ 4 ]

1 голос
/ 07 сентября 2011 
$el.change(function() {
    $(this).prop("disabled",true);
    $.ajax({
        url: ajax_url,
        ...
        success: reenableRadio
    });
}); 

function reenableRadio() {
    $el.prop("disabled",false);
}
1 голос
/ 07 сентября 2011

Если вы используете $ .ajax из jQuery, пытались ли вы сделать это синхронным запросом?

$.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);
        } 
    });
0 голосов
/ 07 сентября 2011

Вы можете отключить переключатели во время запроса и повторно включить их по завершении запроса.

Если вам не разрешено их отключать, вы можете использовать этот метод: 

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.

:)

0 голосов
/ 07 сентября 2011

Если вы хотите, чтобы радио-кнопка была отключена на время всего, что происходит в вашем обработчике событий, а затем стала снова включенной, вы можете сначала отключить ее и включить снова в обратном вызове вашего вызова 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"]
...