javascriptコードが順番に実行されない

Question

私はjson形式のサーバーからデータを取得しようとしています。

for (var i = 0; i < jsonHosts.length; i++) { 
      console.log("dog"); 
      console.log(jsonHosts[i].host.status); 
      document.getElementById('test').innerHTML += "<br>" + jsonHosts[i].host.status; 
      document.getElementById('test').innerHTML += '<br>Some new content!'; 
     } 
     console.log("done"); 

問題があり、このコードブロックに続いて、このコード

for (var i = 0; i < hosts.length; i++) { 
    var tempUrl = url + hosts[i]; 
    jQuery.ajax({ 
     type : "GET", 
     dataType : "json", 
     username : "user", 
     password : "password", 
     url : url, 
     async : true, 
     success : function (data) { 
      //var obj = data.data.host.status; 
      //console.log(obj); 
      jsonHosts.push(data.data); 
      console.log("added data"); 
     } 
    }); 
} 

と

は、私のコンソールには、「完了」し、「追加データ」と表示されますと、私のWebページが空白になります。

私は、関数の最初の部分を入れて実行したが、無駄に終了する機能を待つために私のコードを取得しようと試みました。成功の機能は、あなたのループの後に実行されるよう

とにかく、私はこのコードを実行させることができために/最初のブロック

Answer 1

成功コールバック関数へのコードの一部を以下に移動

success : function (data) { 
    //var obj = data.data.host.status; 
    //console.log(obj); 
    jsonHosts.push(data.data); 
    for (var i = 0; i < jsonHosts.length; i++) { 
     console.log("dog"); 
     console.log(jsonHosts[i].host.status); 
     document.getElementById('test').innerHTML += "<br>" +  jsonHosts[i].host.status; 
     document.getElementById('test').innerHTML += '<br>Some new content!'; 
    } 
    console.log("done"); 
} 

Answer 2

上の第二のブロックの待機を持っているアヤックスは非同期です。これは、コールバックの全体のポイントです

for (var i = 0; i < hosts.length; i++) { 
     var tempUrl = url + hosts[i]; 
     jQuery.ajax({ 
      type : "GET", 
      dataType : "json", 
      username : "user", 
      password : "password", 
      url : url, 
      async : true, 
      success : function (data) { 
       //var obj = data.data.host.status; 
       //console.log(obj); 

      console.log("done"); 
       jsonHosts.push(data.data); 
       console.log("added data"); 
       DataCame(jsonHosts); 
      } 
     }); 
    } 

function DataCame(jsonHosts){ 
for (var i = 0; i < jsonHosts.length; i++) { 
        console.log("dog"); 
        console.log(jsonHosts[i].host.status); 
        document.getElementById('test').innerHTML += "<br>" + jsonHosts[i].host.status; 
        document.getElementById('test').innerHTML += '<br>Some new content!'; 
       } 
}