如何處理jQuery.Ajax中的時間響應（數據類型：JSON）？

Question

我有四個這樣的功能。 他們每個人都在工作。

$.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

那么，如何處理呢？ 我想在屏幕上顯示第一個功能，然后顯示第二個功能，...，依此類推。

Answer 1

jQuery的延期本質上是一種承諾。 利用這一事實。

您希望所有ajax方法盡早執行，以向用戶引入最少的延遲：

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 2

考慮使用$.when() 。

根據文檔 ，當接受多個諾言並返回類似諾言的對象時。 傳遞給.then()的成功回調將在它們全部解決后，通過傳遞給.when()的承諾值來調用。

只是為了完整性，我說$.when()返回一個類似於promise的對象，因為成功處理程序為提供給$.when()每個promise接受一個參數。 真正的承諾以單一價值解決。

無論如何，這是一個例子：

$.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請求將並行運行。

Answer 3

根據您想要的序列創建依賴的ajax調用

$.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
               });
});