コルドバresolvaLocalFileSystemUrl（）はここに私のリスト[]である

Question

内ループに対して非同期ことができない

$scope.getCategory = function(){ 
var newList = []; 
var list = [ 
{ 
    Category: 'Souenir', 
    Image: 'http://domain.com/souvenir.jpg' 
}, 
{ 
    Category: 'specialsouvenir', 
    Image: 'http://domain.com/specialsouvenir.jpg' 
}, 
{ 
    Category: 'flower', 
    Image: 'http://domain.com/flower.jpg' 
}, 
{ 
    Category: 'Toy', 
    Image: 'http://domain.com/toy.jpg' 
}]; 

for(var i = 0;i < list.length;i++){ 
     var item = list[i]; 
     var category = ''; 
     var image = ''; 
     var imageName = item.Image.split("/").pop(); 
     var path = ''; 
     path = 'cdvfile://localhost/persistent/'; 
     window.resolveLocalFileSystemURL(path+imageName, function(entry) { 
      image = entry.toURL(); 
      newList.push({Category:item.Category,Image:image}); 
     }); 
    } 

    return newList; 
} 

結果表示：

4件の商品[正しい]各項目の

画像[正しい]

BUTカテゴリそれぞれの4項目[エラー] ここでは、それは古典的なJSトラップであるiPadの

Answer 1

ためのスクリーンショットです。非同期のwindow.resolveLocalFileSystemURLコールバックのアイテムをnewListにプッシュするので、forループの最後のアイテムにのみアクセスできます。これは同期です。

だから、JSのイベントループは次のようなものになります。 1> 2> 3> 4用のために> 1つのコールバック> 2コールバック>> 4コールバックにそれを説明する素晴らしいvideoあり

3コールバック。

問題を解決し、各項目に固有のカテゴリを設定するには、自己呼び出し関数で非同期操作をラップする必要があります。ここにはjsfiddleという説明があります。

Answer 2

@antonamaのお返事ありがとうございます！

for(var i = 0;i < list.length;i++){ 

    (function (i) { 
      var item = CategoryList[i]; 
      var image = ''; 
      var imageName = CategoryList[i].Image.split("/").pop(); 
      var path = ''; 
      path = 'cdvfile://localhost/persistent/'; 
      window.resolveLocalFileSystemURL(path+imageName, function(entry) { 
      image = entry.toURL(); 
      list.push({Category:item.Category,Image:image}); 
     }); 
     })(i); 
} 

非同期操作の後、リストを更新して返すためにsetTimeout（）を追加します。そうしないと、リストの戻り値は空になります。

setTimeout(function(){ 
    list = list; 
}); 
return list; 

次に完了！