Question

I’m writing a browser extension for chrome that uses Web SQL for local storage. The code for both of these components seems to heavily rely on async operations. I have a good understanding of asynchronous operations but not a whole lot of experience writing code that relies this heavily on them.

For Example:

  var CSUID = "";
 //this is an async callback for handling browser tab updates
 function checkForValidUrl(tabId, changeInfo, tab) {
      getCookies("http://www.cleansnipe.com/", "CSUID", handleCookie);

      if(CSUID != ""){ //this could be in handleCookie if i could access the tab
         //do stuff with the tab
      } 
  }
  function handleCookie(cookie) {
     if (cookie != "" && cookie != null) {
        CSUID = cookie;
     }
  }

In order to overcome the lack of ability to pass/return variables into/from these handlers I find myself creating global variables and setting them in the handlers. Of course this doesn’t work as expected because the variable is often accessed before the callback has executed.

What is the best practice for handling this situation? I thought to use global flags/counters with a while loop to pause execute but this seems messy prone to application hang.

Answer 1

If jQuery is an option, it has a beautiful system of what it calls deferred objects. It allows for graceful and effective management of asynchronous situations – or indeed synchronous, as the cases may be or vary.

(Deferreds aren’t limited to just jQuery, but jQuery has a nice API for them).

Here’s a simple example purely to demonstrate the concept.

//get data func
function get_data(immediate) {
    //if immediate, return something synchonously
    if (immediate)
        return 'some static data';
    //else get the data from something over AJAX
    else
        return $.get('some_url');
}

//two requests two get data - one asynchronous, one synchronous
var data1 = get_data(true), data2 = get_data();

//do something when both resolved
$.when(data1, data2).done(function(data1, data2) {
    //callback code here...
});

Deferreds don’t have to involve AJAX; you can create your own deferred objects (jQuery’s AJAX requests automatically make and return them) and resolve/reject them manually. I did a blog post on this a few months back – it might help.