非同期関数から更新されたグローバル変数へのアクセス

Question

JavaScriptの非同期性を理解することは本当に苦労しています。私は持っているコードは、特定のユーザーの特定の詳細を照合し、すべてのユーザーが配列に追加されたときに操作しようとするグローバル変数配列にすべての照合された情報を配置することを意味します。私は配列を反復するのが難しいと思っています。printurlonPage（）関数でarray.lengthを実行すると、アレイのコンソールログを実行すると、そこに項目があることがわかります。非同期関数が完了した後にのみ、私がグローバル変数で作業できるようにする技術を誰かが知っていますか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
 

 
var PeopleCompleteList = []; 
 

 

 

 
function PersonConstructor(username,Title,Phone,Email,imageurl){ 
 

 
    return { 
 
     name: username, 
 
     Title: Title, 
 
     phoneNumber: Phone, 
 
     Email: Email, 
 
     Picture: imageurl 
 

 
    } 
 

 
} 
 

 
var printurlonPage = function(){ 
 
    
 
     for (var link in PeopleCompleteList) { 
 
      console.log(link['Picture']); 
 
     } 
 
    console.log(PeopleCompleteList); 
 
} 
 

 
var getIndividualPersonDetails = function(GetPictureUrl) { 
 
    listName = 'TeamInfo'; 
 
    //var PeopleCompleteList = []; 
 
       
 

 
     // execute AJAX request 
 
     $.ajax({ 
 
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listName+"')/items?$select=Name/Title,Name/Name,Name/Id,Name/EMail,Name/WorkPhone&$expand=Name/Id", 
 
      type: "GET", 
 
      headers: { "ACCEPT": "application/json;odata=verbose" }, 
 
      success: function (data) { 
 

 
       for (i=0; i< data.d.results.length; i++) { 
 
        //check if the user exists if he does store the following properties name,title,workphone,email and picture url 
 
        if(data.d.results[i]['Name'] != null){ 
 
         var personName = data.d.results[i]['Name'].Name.split('|')[2]; 
 
         var userName = data.d.results[i]['Name']['Name']; 
 
         var UserTitle = data.d.results[i]['Name']['Title']; 
 
         var UserphoneNumber = data.d.results[i]['Name']['WorkPhone']; 
 
         var UserEmail = data.d.results[i]['Name']['EMail']; 
 
         var myuserPicture = GetPictureUrl(userName); 
 
         console.log(myuserPicture); 
 
         PeopleCompleteList.push(PersonConstructor(personName, UserTitle, UserphoneNumber,UserEmail,myuserPicture)); 
 
        } 
 
       } 
 
        
 
      }, 
 
      error: function() { 
 
       alert("Failed to get details"); 
 
       
 
      } 
 
     }); 
 
     
 
    } 
 

 
function GetPictureUrl(user) { 
 
    
 
      var userPicture=""; 
 
      var requestUri = _spPageContextInfo.webAbsoluteUrl + 
 
          "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='"+encodeURIComponent(user)+"'"; 
 

 
        $.ajax({ 
 
          url: requestUri, 
 
          type: "GET", 
 
          async:false, 
 
          headers: { "ACCEPT": "application/json;odata=verbose" }, 
 
          success: function (data) { 
 
           console.log(data); 
 
           
 
           var PictureDetails = data.d.PictureUrl != null ? data.d.PictureUrl : 'c:\apps\noimageurl.jpg'; 
 
           userPicture=PictureDetails; 
 
          } 
 

 
         }); 
 
       return userPicture; 
 

 
}; 
 

 
$(function() { 
 
\t getIndividualPersonDetails(GetPictureUrl); 
 
    printurlonPage(); 
 
}); 
 

 

 
</script>

Answer 1

あなたはprinturlonPage（だ）非同期ではないので、getIndividualPersonDetailsが応答する前に、それが実行しています。約束事を使うか、es7からasync/awaitを使うかは、2つのことができます。私はasync/awaitが好きですが、あなたは身長を上げる必要があります。

または、あなたのprinturlonPage呼び出しをあなたのsuccess：ハンドラに入れることができます。

success: function (data) { 

     for (i=0; i< data.d.results.length; i++) { 
      //check if the user exists if he does store the following properties name,title,workphone,email and picture url 
      if(data.d.results[i]['Name'] != null){ 
       var personName = data.d.results[i]['Name'].Name.split('|')[2]; 
       var userName = data.d.results[i]['Name']['Name']; 
       var UserTitle = data.d.results[i]['Name']['Title']; 
       var UserphoneNumber = data.d.results[i]['Name']['WorkPhone']; 
       var UserEmail = data.d.results[i]['Name']['EMail']; 
       var myuserPicture = GetPictureUrl(userName); 
       console.log(myuserPicture); 
       PeopleCompleteList.push(PersonConstructor(personName, UserTitle, UserphoneNumber,UserEmail,myuserPicture)); 
      } 
     } 
     printurlonPage(); 

    }, 

そしてdocument.readyに：だから

$(function() { 
    getIndividualPersonDetails(GetPictureUrl); 
}); 

、getIndividualPersonDetailsが呼び出され、それがデータを受信したときに、コールバックはデータで呼び出されます。