Как правильно разместить эти данные асинхронно и отменить / поставить в очередь новые запросы?

Question

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

Например, у меня есть следующий javascript:

//When a resize occurs a lot of handling needs to happen to convert the user's action into
//a visibly-pleasing result. In addition, the server has to be spoken with in order to save the controls.
function OnClientResizing(pane, eventArgs) {
    eventArgs.set_cancel(true);
    var parameters = new Array();
    parameters.push("Resize");
    parameters.push(pane.get_id());
    parameters.push(eventArgs.get_delta());
    __doPostBack(pane.get_splitter()._uniqueID, parameters);
}

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

Как таковой, я хотел бы поставить в очередь будущие изменения размера или поиграть с отменой текущих запросов. Я читал, что лучший способ сделать что-то подобное - это просто установить флаг за пределами этой функции. Я могу сделать это, но я не уверен, как определить конец doPostBack. Должен ли я как-то изменить переменную javascript со стороны сервера в PageRequestManager - EndRequest?

Приветствия

Answer 1

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

Во-вторых, если ваш код не может обрабатывать два Ajax-вызова в полете одновременно, то ваши варианты следующие:

1. Исправьте ваш код, чтобы он мог обрабатывать последовательные ответы ajax в полете одновременно.
2. Отмена / игнорирование первого ответа ajax в момент отправки второго, чтобы вы проигнорировали ответ первого и дождались ответа второго.
3. Запретить второй запрос ajax, пока первый не завершится. Я бы не советовал ставить их в очередь, потому что это приведет к еще худшему впечатлению пользователя.

Детали того, как сделать 1, 2 или 3, зависят от того, как работает ваш код, которым вы еще не поделились.

Самый простой вариант 3). Это можно сделать только с помощью глобального флага. Просто определите глобальную переменную, установите ее в true при запуске вызова ajax и очистите его после завершения вызова ajax (в функции завершения):

var ajaxInFlight = false;  // global declaration

function OnClientResizing(pane, eventArgs) {
    if (ajaxInFlight) return;    // do nothing if ajax call already in flight
    ajaxInFlight = true;
    eventArgs.set_cancel(true);
    var parameters = new Array();
    parameters.push("Resize");
    parameters.push(pane.get_id());
    parameters.push(eventArgs.get_delta());
    __doPostBack(pane.get_splitter()._uniqueID, parameters);
}

function postBackCompletionHandler(id, parms) {
    ajaxInFlight = false;               // clear global flag, ajax call done
   // ... rest of your function here
}

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