Question

Need to wait for several requests to facebook to complete before taking a final action on the page (updating the count of how many requests returned info) but not sure how to approach it.

How do you check that each function is complete and update a counter before firing a function.
window.load is too early unless the page is refreshed after login…?

    window.fbAsyncInit = function () {
     FB.init({
     appId: 'id', // App ID
     //channelUrl: '//facebookdev.smithbrosagency.com/LOL/xss_channel.htm', // Channel File
     status: true, // check login status
     cookie: true, // enable cookies to allow the server to access the session
     xfbml: true  // parse XFBML
     });

     getStatus();

      //Subscribe to events
     FB.Event.subscribe('auth.statusChange', function (response) { if (response.authResponse) { getStatus(); } });
     FB.Event.subscribe('auth.login', function (response) { if (response.status === 'connected') { getStatus(); } });
    };
     function getStatus() {
      FB.getLoginStatus(function (response) {

      if (response.status === 'connected') {
       setPanel('results'); // connected

       var accessToken = response.authResponse.accessToken;

       var obj = getPermissionsObject(function (permissions) {

       getUserInfo(response);

       getUserPhotos(response, accessToken);

       getFriends(response, accessToken);

       getUserLocations(response, accessToken);

       getUserMusic(response, accessToken);

       getUserMovies(response, accessToken);

           });
      } else {
       setPanel('login'); // not logged in or unauthorized
      }
      });
     }
     function getUserPhotos(response, accessToken) {

      FB.api('/me/photos?access_token=' + accessToken, function (response) {
      var photoList = response.data;
      var len = photoList.length;
      if (len >= 3) {

       var max = 3;
   if (len > max) { len = max }; // cap it at 3

   for (var i = 0; i < len; i++) {
   (function () {
    var j = i;
    var idx = i + 1;
    $('.result2 .option' + idx + ' input').val(photoList[i].picture);
    $('.result2 .option' + idx + ' img').attr("src", photoList[i].picture);

       })();
    }
       $('div.result2').addClass("active");
       $('#q2 input').val(1); // add to hidden to count results
          }
    else {
       // hide & subtract from total questions
       $('div.result2').addClass("inactive");
       $('#q2 input').val(0); 
      }
      });
     }

     $(window).load(function () {
      $.when($('#q2 input').val() != '' && $('#q4 input').val() != '' && $('#q5 input').val() != '').then(test());

      function test() {

      // calc total questions
      var total = 0;

      $("#Results div input[hidden]").each(function () {
       total += $(this).val() * 1;
      });
      alert(total);
      }
     });

Answer 1

I’m not sure if I understand you correctly but it seems you need to implement an object like this:

<script type="text/javascript">

//Monitoring object
function RequestStatusMonitor()
{
    this.resetRequests();
}

//IDs of the requests you need to monitor
RequestStatusMonitor.prototype.requests=["firstRequest","secondRequest","thirdRequest"];

//Status of the requests
RequestStatusMonitor.prototype.requestsCompleted=[];

//Set all requests to incomplete state
RequestStatusMonitor.prototype.resetRequests = function()
{
    this.requestsCompleted = [];
    for(var it in this.requests)
    {
        this.requestsCompleted[this.requests[it]] = false;
    }
}
//Set status for a request determined by requestName
RequestStatusMonitor.prototype.setRequestStatus = function(requestName, status)
{
    this.requestsCompleted[requestName] = status;
}

//Check if all requests are completed
RequestStatusMonitor.prototype.allRequestsAreCompleted = function()
{
    for(var it in this.requestsCompleted)
    {
        if(!this.requestsCompleted[it])
        {
            return false;
        }
    }
    return true;
}

//----------------------------------------------------------------------------------
//Usage Example
var monitor = new RequestStatusMonitor();

function onFirstRequestFinished(/*necessary parameters*/)
{
    monitor.setRequestStatus("firstRequest", true);
    checkCompleted();
}

function onSecondRequestFinished(/*necessary parameters*/)
{
    monitor.setRequestStatus("secondRequest", true);
    checkCompleted();
}

function onThirdRequestFinished(/*necessary parameters*/)
{
    monitor.setRequestStatus("thirdRequest", true);
    checkCompleted();
}

function checkCompleted()
{
    if(monitor.allRequestsAreCompleted())
    {
        //Do what you need after all requests are completed
        alert("All requests are completed");
    }
}

onFirstRequestFinished();
onThirdRequestFinished();
onSecondRequestFinished();

</script>