2017-01-20 71 views
0

我有像下面的數據和JavaScript的兩個循環和Ajax來獲取數據。 這兩個循環與i j值一起正確工作。但是,如果我在內部循環內添加ajax,請求不會按順序進行。我需要在循環序列中獲取數據。我們怎樣才能做到這一點?java腳本關閉異步AJAX調用

var final = {}; 
final.reports = ['a','b','c'] 
final.clients = ['x','y'] 
final.reportDataJson = []; 

for(var i=0;i<final.reports.length;i++){ 
     (function(i,reactthis){ 

      for(var j=0;j<final.clients.length;j++){ 
       (function(i,j,final){ 
        console.log(i+" "+j+" "+final.clients[j]) 
        // this shows correct i j values 
        $.ajax({ 
         url: url, 
         cache: false, 
         success: function(html) { 
          var reportResponse = { 
           reportname : final.reports[i], 
           clientname : final.clients[j], 
           reporthtml : html, 
           reportgraph : '' 
          } 
          final.reportDataJson.push(reportResponse) 
          //console.log(i,j) 
          if(i == final.reports.length-1 && j == final.clients.length-1){ 

           console.log(final.reportDataJson); 

          } 
         }, 
         error: function(xhr, status, err) { 
          if(i == final.reports.length-1 && j == final.clients.length-1){ 
          } 
         } 
        })    

       }) 
      } 


     })(i,final); 
    } 
+0

'//這說明正確IJ values'的緣故秒 - 我懷疑這一點,在那裏的代碼不會運行 –

+0

.ajax''$是異步的,並且不能保證它們執行的順序是它們完成的順序 - 因此'if(i == final.reports.length-1 && j == final.clients.length-1){'不能保證所有的數據已經收到了一個開始,當然,這個訂單可能是錯誤的... ...看看'$ .when'的解決方案 –

回答

0

您可以使用$.ajax返回無極的事實 - 與$.when - 它等待了許多承諾,並以返回解析值!

var final = {}; 
final.reports = ['a', 'b', 'c']; 
final.clients = ['x', 'y']; 
final.reportDataJson = []; 

$.when.apply($, [].concat.apply([], final.reports.map(function(report) { 
    return final.clients.map(function(client) { 
     return $.ajax({ 
      url: url, 
      cache: false 
     }).then(function(results) { 
      var html = results[0]; 
      // results[0] is same as success: html argument 
      // results[1] is textStatus 
      // results[2] is jqXHR 
      return { 
       reportname: report, 
       clientname: client, 
       reporthtml: html, 
       reportgraph: '' 
      }; 
     }); 
    }) 
}))).then(function() { 
    final.reportDataJson = [].slice.call(arguments); 
    console.log(final.reportDataJson); 
}); 

使用$ .when.apply,因爲$。當接受參數1..N作爲承諾

使用[] .concat.apply到 「變平」,由嵌套返回的數組的數組。地圖的

這與本地無極

Promise.all([].concat.apply([], final.reports.map(function(report) { 
    // code unchanged from above .... 
}))).then(function(results) { 
    final.reportDataJson = results; 
    console.log(final.reportDataJson); 
}); 

Promise.all需要承諾的陣列更容易一些,這是.then回調接收一個參數,結果數組這些承諾

而對於ES2015 +善良

Promise.all([].concat.apply([], final.reports.map(report => final.clients.map(client => $.ajax({ 
    url: url, 
    cache: false 
}).then(([html, status, jqXHR]) => ({ 
    reportname: report, 
    clientname: client, 
    reporthtml: html, 
    reportgraph: '' 
})))))).then(results => console.log(final.reportDataJson = results));