코도 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 개 항목 [올바른 각 항목

이미지 [올바른]

그러나 범주는 각 4 항목 [오류 여기서 그것은 고전 JS 트랩이다시오

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; 

그런 다음 완료!