Question

I am trying to determine through some flag when this asynchronous function ends.

This is how I call my function:

// Calling the function in a loop
for (var i=0,l=myIds.length; i<l; ++i) {
    install(pageId, myIds[i], apps_num[''+myIds[i]], <?php echo $this->comid ?>, '<?php echo $this->site_url; ?>');
}

And this is my function:

install: function(pageId, appId, app_num, com_id, siteurl) {
    FB.getLoginStatus(function(response) {
        // Checking if connected to Facebook
        if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            console.log(response.authResponse);
            var userAccessToken = response.authResponse.accessToken;

            // Get page access token
            FB.api('/'+pageId+'?fields=access_token='+userAccessToken, function(response) {
                var pageAccessToken = response.access_token;

                // Get information if user got this application
                FB.api('/'+pageId+'/tabs/'+appId+'?access_token='+pageAccessToken,
                    function(data) {
                        if (data.data.length < 1) {
                            console.log("Not installed, Installing...");

                            // Install the application
                            var params = {};
                            params['app_id'] = appId;
                            FB.api('/'+pageId+'/tabs?access_token='+pageAccessToken, 'post', params, function(response) {
                                if (!response || response.error) {
                                    console.log("Error Installing!");
                                }
                                else {
                                    console.log("Installed :)");
                                }
                            });
                        }
                        else {
                            console.log("Already installed.");
                        }
                    });
                });
            }
            else
                if (response.status === 'not_authorized') {
                    console.log("the user is logged in to Facebook, but not connected to the app.");
                }
                else {
                    console.log("the user isn't even logged in to Facebook.");
                }
            });
        }

How can I solve this issue? I tried to use static variables, but I wasn’t able to call them inside the asynchronous function..

Answer 1

The usual thing is to have any code that needs to know the outcome of an asynchronous call pass a function reference into the call, which the function then calls when it’s done (a “callback”).

So in your case, you’d add a callback parameter to your install function:

install: function(pageId, appId, app_num, com_id, siteurl, callback)
//                                        here ------------^

…and then call it when appropriate from the callbacks you’re passing into FB.getLoginStatus and/or FB.api, e.g. something like this:

install: function(pageId, appId, app_num, com_id, siteurl, callback) {
        FB.getLoginStatus(function(response) {
                       // checking if connected to facebook
              if (response.status === 'connected') {
                var uid = response.authResponse.userID;
                console.log(response.authResponse);
                var userAccessToken = response.authResponse.accessToken;

                // get page access token
                FB.api('/'+pageId+'?fields=access_token='+userAccessToken, function(response) {
                    var pageAccessToken = response.access_token;

                    // get information if user got this app
                    FB.api('/'+pageId+'/tabs/'+appId+'?access_token='+pageAccessToken,
                       function(data) {
                         if (data.data.length < 1) {
                             console.log("Not installed, Installing...");

                            // install the app
                             var params = {};
                             params['app_id'] = appId;
                             FB.api('/'+pageId+'/tabs?access_token='+pageAccessToken, 'post', params, function(response) {
                                 if (!response || response.error) {
                                    callback(false, "Error installing");
                                    console.log("Error Installing!");
                                 } else {
                                    callback(true, "Installed");
                                    console.log("Installed :)");

                                 }
                                });
                         }
                         else {
                             callback(false, "Already installed.");
                             console.log("Already installed.");
                         }
                     });
                });
              } else if (response.status === 'not_authorized') {
                callback(false, "Logged in but not connected.");
                console.log("the user is logged in to Facebook, but not connected to the app.");
              } else {
                callback(false, "Not logged in.");
                console.log("the user isn't even logged in to Facebook.");
              }
             });
      }

There I’ve given the callback function two arguments: A boolean saying whether the installation was performed, and a status message.