Javascript for forループは最初から実行されます

Question

なぜ私のループが機能していませんか？このループが始まったばかりです。 HamtaPokemonの関数でjsonを取得し、z = 11から取得します。

console.log(z); 
    for(var z=1; z<11; z++){ 
    console.log(z); 

    var pokeid=$("#pokeid").val(); 
    HamtaPokemon(z).then((data)=>{ 
     console.dir(data); 
     $("h1").text(data.name); 
      var pokId = "pokId" + z; 
      var pokName = "pokName" + z; 

      var pokImage = "pokImage" + z; 
      (pokId).toString() ; 
      (pokName).toString(); 
      (pokImage).toString() ; 
      console.log(z); 
     //document.getElementById('pokId').innerHTML = data.id; 
    //document.getElementById('pokName').innerHTML = data.name; 
    //document.getElementById("pokImage").innerHTML= '<img src=http://img.pokemondb.net/artwork/'+data.name+'.jpg>'; 


     $("h4").text(data.id); 


    }); 

}

enter image description here

Answer 1

あなたはそのチェーンの約束を効用関数を記述する必要があります。

例えば、

function asyncForEach(items, cb) { 
 
    return items.reduce((p,c) => { 
 
     return p.then(value => cb(c)); 
 
    }, Promise.resolve()); 
 
} 
 

 
var items = [1,2,3,4,5,6,7,8,9,10,11]; 
 

 
function HamtaPokemon(z) { 
 
    console.log(z); 
 
    return Promise.resolve(z); 
 
} 
 

 
function cb(z) { 
 
    return HamtaPokemon(z) 
 
     .then(data => { /* ... */}); 
 
} 
 

 
asyncForEach(items, cb) 
 
    .then(result => console.log(result));

上記あまりにもそれらを同時に実行するように変更することができます。しかし、私は逐次処理を想定

asynchronicity in JavaScriptについても読む必要があります。