How do I implement a synchronous wrapper in JavsScript?

Question

I am using Googles Analytics api in Javascript.

They provide a method that gets the result of a list, once the execution is done it calls a callback method with the result.

Looks something like this:

gapi.client.analytics.management.accounts.list().execute(handleAccounts);

...

function handleAccounts(results) {
        if (!results.code) {
        if (results && results.items && results.items.length) {

// See this code below.

        } else {
            console.log('No accounts found for this user.')
        }
    } else {
        console.log('There was an error querying accounts: ' + results.message);
    }
}

Generally this is fantastic, however... I need a flattened list of all child items so I keep calling like this:

 $.each(results.items, function (index, value) {

gapi.client.analytics.management.webproperties.list({ 'accountId': value.Id}).execute(handleWebproperties);
// and so on..
            })

The problem being if at any level you have more than one item you end up with multiple asynchronous calls shooting off, and I won't know when they have all finished to get the final list.

Other than writing something to keep track of how many calls have been made then waiting for that total to come back.

How can I easily know when they have all completed?

Thanks.

In summary:

A user can have multiple accounts, accounts can have multiple properties and properties can have multiple profiles.

I need all the profiles for all the accounts of a user.

Answer 1

The way to solve this is to keep track of how many asynch calls you've made (or are going to make) and in each response you receive decrement that count and check to see if the last one is now done. It is important to make sure you have robust error handling in case one response generates an error and doesn't complete successfully.

You seem to know this is an option and it's unclear why you aren't pursuing this, but it is the way to solve this. It's also possibly to use jQuery deferreds to keep track of when the last one is done, but that's just using a library to do your counting for you - it's still fundamentally the same thing underneath.

Answer 2

Based on my fork function which I wrote as a previous answer to this: Coordinating parallel execution in node.js. I would do it like this:

var queryFunctions = []
$.each(results.items, function (index, value) {
    queryFunctions.push(function(callback){
        gapi.client.analytics.management.
            webproperties.list({ 'accountId': value.Id}).
            execute(callback);
    });
})

fork(queryFunctions,function(result){
    // This is the final callback, so do processing here
})

The implementation of fork is simply this:

function fork (async_calls, shared_callback) {
  var counter = async_calls.length;
  var all_results = [];
  function makeCallback (index) {
    return function () {
      counter --;
      var results = [];
      // we use the arguments object here because some callbacks 
      // in Node pass in multiple arguments as result.
      for (var i=0;i<arguments.length;i++) {
        results.push(arguments[i]);
      }
      all_results[index] = results;
      if (counter == 0) {
        shared_callback(all_results);
      }
    }
  }

  for (var i=0;i<async_calls.length;i++) {
    async_calls[i](makeCallback(i));
  }
}

As you can see, all it does is keep track of how many calls have been made in the counter variable. But it's all encapsulated in a single function so you can re-use the logic. Also, I think it makes the code more tidy.

Answer 3

You can use the jQuery Deferred features to do this sort of thing. Basically if you wrap the callbacks in a Deferred object, then use $.when(...) to group them all together.

Something like this (the exact structure that will make the most sense for you will depend on how you're using it, this code assumes you need to do something specific in each callback as well as know when they're all done):

var promises = [];
$.each(results.items, function (index, value) {
    var deferred = new $.Deferred();
    gapi.client.analytics.management.webproperties.list({ 'accountId': value.Id}).execute(function(results) {
        handleWebproperties(results);
        deferred.resolve();
    });
    promises.push(deferred.promise());
    // and so on...
});

$.when.apply(this, promises).done(function() {
    alert("Everything is finished!");
});

_{Note I'm just coding straight into the browser window, so this may not be 100% functioning. :)}