Проблема с JQuery AJAX

Question

У меня проблемы с исправлением ошибки на существующем веб-сайте ASP.NET MVC.

В одном из представлений есть ряд текстовых полей, в которые пользователь вводит данные. Каждое текстовое поле имеет некоторый javascript, присоединенный к событию размытия, чтобы отправить сообщение на сервер при изменении текста. Более конкретно, код использует метод JQuery $ .ajax для выполнения этих вызовов. Это необходимо для сохранения временных данных в сеансе.

В том же представлении есть также кнопка сохранения, которая также отправляет данные через AJAX в событии click. Проблема, с которой я столкнулся, заключается в том, что если пользователь нажимает кнопку «Сохранить», когда одно из текстовых полей имеет фокус, событие размытия запускается одновременно с событием нажатия кнопки, и одновременно вызываются два сообщения ajax. Это приводит к ненадежному поведению.

Я знаю, что текущий дизайн не очень хорош, но я ищу самое простое решение. Возможно ли как-то поставить эти два события в очередь или есть другое решение? Спасибо.

Answer 1

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

var queue = new Array(0);
$(function() { 
  $('#inputID').blur(function() { AjaxQueue(this); });
});

function AjaxQueue(element) { 
  var length = queue.push(element);
  if (length == 1) {
    ExecuteNextQueueItem();
  }
}

function ExecuteNextQueueItem() {
  var queueElement = queue.shift();
  if (queueElement != null) {
    // ajax call with queueElement
  }
}

затем в конце функции обратного вызова результата просто вызовите ExecuteNextQueueItem();

Answer 2

Вы можете установить вызов ajax onblur сразу после некоторого времени ожидания, если для некоторой переменной состояния еще не установлено значение true, и эта переменная состояния может быть установлена ​​в значение true, когда форма отправляется.Примерно так:

$(document).ready(function() {
    var form_processed = false;
    $('input:text').blur(function() {
        var $el = $(this);
        setTimeout(function() {
            if (!form_processed) {
                // do ajax call with $el ...
            }
        }, 500);
    })
    $('form').submit(function() {
        form_processed = true;
        // submit form via ajax ...
        return false;
    });
});

(этот код не проверен, но, надеюсь, он работает)

Answer 3

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

var isSaved = false;
function onblur(ev) {
    setTimeout(function(){
        if (!isSaved) {
            // make ajax call
        }
    }, 200);
}

function onsave(ev) {
    isSaved = true;
    // make ajax call
}