Что делать, когда пользователи обгоняют ajax

Question

Моя программа выполняет вызов ajax, когда пользователь нажимает кнопку-переключатель.В случае успеха цвет фона ячейки таблицы, содержащей переключатель, изменяется, чтобы пользователь знал, что его выбор был опубликован в базе данных.

Проблема в том, что иногда фон не меняется.Я ловлю на ошибки, поэтому я не думаю, что это из-за ошибки.Мне интересно, опережает ли пользователь успешный обратный вызов.

var setup = {};
setup.url = 'Gateway.cfc';
setup.type= 'POST'
setup.dataType='json';
$.ajaxSetup(setup);

var settings = {};
settings.data = {};
settings.data.method = 'Save';
settings.data.AssignmentID = $('input[name=AssignmentID]').val();
settings.error = function(xhr, ajaxOptions, thrownError) {
    $('#msgErr').text(thrownError);
};

settings.success = function(result) {
    $('#msg').empty();
    $('#msgErr').empty();
    if (result.RTN) { // uppercase RTN
        $('#' + settings.data.AnswerID).addClass('answer');
    } else {
        $('#' + settings.data.AnswerID).next().append('<span class="err"> ' + result.MSG + '</span>');
    }
}

$('input').filter(':radio').change(function() {
    var myName = $(this).attr('name');
    $('input[name=' + myName + ']').closest('td').removeClass('answer');
    settings.data.AnswerID = $(this).val();
    $.ajax(settings);
});

Answer 1

Между вашей записью Ajax на сервере и обновлением элемента пользовательского интерфейса на вашем экране есть задержка.Я не знаю, какую библиотеку Ajax вы используете, но вы могли бы подключиться к платформе Ajax и отобразить плавающий элемент div, который покрывает весь экран.Этот div может содержать другие элементы, такие как изображение или другие div, span, p-теги и т. Д. В некоторых библиотеках это также называется диалогом.

Я бы порекомендовал попытаться найти функции before_Ajax_send и after_Ajax_receive в вашей библиотеке Ajax и прикрепить ваши функции к этим событиям.Функция before_send должна отображать плавающий div, а after_receive должен закрывать div.

Надеюсь, это поможет.

Answer 2

Опубликуйте это как ответ на случай, если это удастся:)

$('input').filter(':radio').change(function() {
    $(this).closest('td').removeClass('answer');
    var mySettings = $.extend(true, {data:{AnswerID: $(this).val()}}, settings);
    $.ajax(mySettings);
});

Это обеспечит отсутствие условий гонки с вашими настройками, если вызовы будут сделаны в быстрой последовательности.