AJAX Оптимизация технологий?

Question

Мой вопрос немного абстрактный.

Мы все знакомы с предварительными загрузчиками/прядильщиками AJAX, которые появляются, когда выполняется запрос AJAX. Мой вопрос: как вы их избегаете?

Возьмем, к примеру, сортируемый список. Когда пользователь перетаскивает и удаляет элементы для их использования, выполняется вызов AJAX для обновления заказа.

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

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

Мне не нужны примеры кода, только что принятые или популярные методы/идеи. Или, если я полностью ухожу отсюда.

Спасибо

Answer 1

обновление

использование async javascript library вместо этого, чтобы достичь того, чего вы хотите

старый ниже

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

Поскольку я получил кивок, я объясню его особенности.

1. Остановки очередь, если ошибка происходит
2. продолжается очередь, как успех происходит
3. имеет обработчики событий для успеха/ошибок с контекстом

Я пишу плагин так это идея, достойная плагин? Я так не думаю, но эй, ты никогда не знаешь.

var queue = [], 
doRequest = function(params) { 
    params.running = true; 
    $.ajax({ 
     url: params.url, 
     dataType: 'json', 
     success: function(d) { 
      params.success.call(params,d); 
      queue.unshift(); // Quit counting your change and move along. 
      if (queue.length > 0) { 
       doRequest(queue[0]); // Hey buddy, your next. 
      } 
     }, 
     error: function(a,b,c) { 
      params.error.call(params,a,b,c); 
      alert('"oops"'); // Rick Perry 
     } 
    }); 
}, 
queueRequest = function(params) { 
    queue.push(params); // Sir, you'll need to go to the BACK of the line. 
    if (!queue[0].running) { 
     doRequest(queue[0]); 
    } 
}; 

// so to use this little snippit, you just call "queueRequest" like so (over and over) 
queueRequest({ 
    url: 'someajax.abc', 
    success: function(d) { 
     // let the user know their stuff was saved etc. 
     // "this" will be the context of the "params" 
    }, 
    error: function(a,b,c) { 
     // let the user know something went wrong etc. 
     // "this" will be the context of the "params" 
    } 
}); 

И все готово.

Answer 2

Одним из вариантов может быть создание какого-то очередь запросов на клиенте. Когда пользователь сортирует два элемента, элемент добавляется в очередь и начинает выполнение. Если другой тип происходит до завершения первого вызова, он помещается в очередь и будет выполняться после первого завершения.

UPDATE:
Вы должны точно обрабатывать случай, когда выполняется синхронный запрос. На этом этапе все запросы ajax должны быть как-то сохранены в скрытом поле (просто идея) и обрабатываться сервером до самого синхронного запроса.

Answer 3

Вы можете создать «диспетчер запросов ajax», который ставит в очередь (и потенциально связывает вместе) ожидающие запросы ajax. У меня сложное приложение со многими аякс-обновляемыми элементами управления, я показываю прядильщики только над элементами управления, которые обновляются. Поскольку ваш перетаскиваемый список обновляет информацию только на сервере, вы, вероятно, можете уйти без счетчика.

Answer 4

я предлагаю вам очередь Jquery, это поможет вам в очередь что-нибудь, если это Ajax запрос или анимации очереди ...

Answer 5

Этот ответ немного абстрактно, но посмотрите на JQuery Отложенный объект: http://api.jquery.com/category/deferred-object/

Это может быть полезным в вашей ситуации, так как это в основном добавляет государственную информацию для вызова AJAX, который вы можете прочитать/обновлять по желанию.

Answer 6

• Есть центральный запрос Q.
• И скрытый счетчик на вершине все.

Центрального запрос Q Имея центральный массив, который временно хранит весь запрос, поэтому pesudo код будет что-то вроде этого ...

var centralQ = []; //holds the entire process Q 

var inProc = false; //provides an in Q proc lock 
//processes the request one at a time 

function reqProc() { 
    if(centralQ.length == 0) { 
     inProc = false; 
     return true; 
    } 

    inProc = false; //locks it 
    var req = centralQ[0]; 

    function callBack() { 
     //error/res processing?? 
     if(req.callback) { 
      req.callback.apply(req, arguments); //calls the request callback 
     } 

     window.setTimeout(reqProc, 0); //loop backs, uses timeOut to defer the the loop 
    } 

    //Your loader??? 
    jQuery.get(req.url, req.data, callBack); 
} 

function addReq(addRequest) { 
    centralQ.push(addRequest); 
    if(!inProc) { //does not process if it is already running 
     reqProc(); 
    } 
} 

Вы proabably должны сделать некоторые ошибки ловли/retrying, но вы получите приблизительную идею.

Global Spinner Просто начинайте притирать верхний прядильщик, когда это необходимо, и выцветаете, когда это не нужно.

Answer 7

Не так ли почему, есть опция async в jquery?

Используйте async: true, чтобы поставить запрос в очередь.

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

Появление большой коробки, чтобы избежать доступа ко всей странице ... это просто глупая идея (без обид).

Используйте прядильщики, для конкретных элементов, которые каким-то образом обрабатываются или обрабатываются. Для запроса, просто использовать асинхронной ...

ДЕЛО ЗАКРЫТО;)