访问从异步函数更新的全局变量

Question

i'm really struggling to understand the asynchronous side of JavaScript. the code i have is meant to collate specific details of certain users and then put all the collated information into a global variable array which i intent to manipulate when all the users have been added to the array. i'm finding it difficult to iterate the array because when i do an array.length on the printurlonPage() function i get a 0 despite the fact that when i do a console log on the array itself i can see that there are items there. Does anyone know a technique that allows me to work on the global variable only after the asynchronous function has completed?

 <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 () { getIndividualPersonDetails(GetPictureUrl); printurlonPage(); }); </script> 

Answer 1

You're printurlonPage() is not asynchronous, so it's running before getIndividualPersonDetails responds. You can do two things, use promises or use async/await from es7. I prefer async/await, but you'll need to babelify.

Or, you can just put your printurlonPage invocation inside your success: handler.

    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();

    },

And then in document.ready:

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

So, getIndividualPersonDetails is invoked, and then when it receives the data, the callback is invoked with the data.