Как обрабатывать ответ времени в jQuery.Ajax (DataType: JSON)?

Question

У меня есть четыре funcion как это. Каждый из них работает.

$.ajax({ 
     url: sectoresURL, 
     context: document.body, 
     timeout: 10000 // 1000 MS = 10 Seconds 
     }).done(function(jsonSectores) { 
      // Blablabla... 
     }); 

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

Например:

Get Http://... 200 ms 
Get Http://... 150 ms 
Get Http://... 100 ms 
Get Http://... 50 ms 

Итак, как справиться с этим? Я хотел бы показать на Screem первую функцию, а затем, вторую функцию, ... и т.д.

Answer 1

Создание зависимой АЯКС вызов, как в последовательности вы хотите, как

$.ajax({ 
     url: sectoresURL, //First Call 
     context: document.body, 
     success: function(data){ 
      $.ajax({ 
       url: "example/",// Second call 
       data: 'page='+a, 
       success: function(data){ 
         //Call your 3rd function if you want and so on 
       }); 
}); 

Answer 2

deferreds JQuery являются по существу тип обещания. Воспользуйтесь этим фактом.

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

var p1, p2, p3, p4; 
p1 = $.ajax(...); 
p2 = $.ajax(...); 
p3 = $.ajax(...); 
p4 = $.ajax(...); 

Но вы также должны их обратные вызовы ждать, пока предыдущие запросы Ajax не были завершены.

Вы можете сделать это с $.when:

var p1Done, p2Done, p3Done, p4Done; 
p1Done = p1.then(function (p1Resolution) {...}); 
p2Done = $.when(p1Done, p2).then(function (p1Resolution, p2Resolution) {...}); 
p3Done = $.when(p2Done, p3).then(function (p2Resolution, p3Resolution) {...}); 
p4Done = $.when(p3Done, p4).then(function (p3Resolution, p4Resolution) {...}); 

---

Слово предостережения:

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

Answer 3

Рассмотрите возможность использования $.when().

В соответствии с documentation, когда принимает несколько обещаний и возвращает объект, похожий на обещание. Обратный вызов успеха, переданный в .then(), будет вызываться со значениями обещаний, переданных .when(), когда все они были разрешены.

И просто для полноты картины, я говорю $.when() возвращает обещания, как объекта, поскольку обработчик успеха принимает аргумент для каждого обещания, предоставленного $.when(). Реальные обещания разрешаются с помощью одного значения.

В любом случае, вот пример:

$.when(
$.ajax({ 
    url: url, 
    context: document.body, 
    timeout: 10000 
}), 
$.ajax({ 
    url: url, 
    context: document.body, 
    timeout: 10000 
}) 
).then(
function (first, second) { 
    console.log("The first result is: " + first[0]); 
    console.log("The second result is: " + second[0]); 
}, 
function(e) { 
    console.log("Something happened: " + e); 
} 
); 

Этот подход предпочтительнее цепочки как запросы AJAX будут работать параллельно.