Question

I’m working on a webapp that uses jQuery, and I’m getting something that looks like it could be a race condition when testing it. Despite my best efforts, though, I’m uncertain how to proceed.

The code is on GitHub, but I’ll summarize the odd behavior here.

Early AJAX Request

I’ve got some code that requires an AJAX call and for the DOM to be ready. To speed things up, I’m making the AJAX call before the $(document).ready() event fires. In the linked JS file, this is the “init” function. This function calls _build_site_select, which sets up the AJAX request. When complete, _on_site_list_success is called.

On $(document).ready()

When I get to ready(), I make the calls that require both the AJAX and the ready() event to be fired. In the linked code, this is the populate_site_select call. Since the AJAX might not be complete when ready() is called, I check a variable that I set after the AJAX operation is complete, and use setTimeout to delay the call to populate_site_select if it is still too early to complete. The variable site_list_ready is set when the AJAX call is complete, and is checked in functions that require the site list to be completely finished before executing.

Expected and Observed behavior

The behavior I expect to see is that populate_site_select will only be called after the object/associative array in _on_site_list_select is completely populated. However, this is not always the case. Sometimes, when I get to populate_site_select, the array is only partially populated – it seems consistent in the way that it fails (it’s always the same single entry in the array, as opposed to the ~30 or so that I expect).

What I’ve tried

I’ve also tried adding a setTimeout call to the _on_site_list_success call, which further separates the population of the array from the setting of the site_list_ready variable. However, this doesn’t prevent the problem.

I know that the JSON data returned from the AJAX call is correct (I can view it in the chrome debugger), and if I check the value of the site list variable later, (after the page has finished loading) it’s properly populated.

This doesn’t seem that unusual of a scenario, and I find it hard to believe that the bug is in Chrome (although I haven’t tested this with other browsers). What am I doing wrong?

Answer 1

I didn’t try the code below, but jQuery’s Deferred objects can help you.

var domReady, ajax;
domReady = jQuery.Deferred();

jQuery(function () {
    // on DOM ready
    domReady.resolve();
});

ajax = jQuery.ajax({
  url: '/path/to/file',
  type: 'GET',
  dataType: 'xml/html/script/json/jsonp'
});

jQuery.when(domready, ajax).then(doneCallbacks, failCallbacks);

Basically, you have two deferred objects, one that handles the DOM ready state, and the second that handles the AJAX call; we manually manage the first object, resolving it when the DOM is ready; the second one is automagically managed by jQuery itself ($.ajax objects are Deferred objects, and are resolved when the AJAX call succeeds).

Finally, with jQuery.when() we observe the status of the deferred objects, and when they’re both resolved, the doneCallback is fired; if one of the two objects is rejected, the failCallback is fired.

So, the doneCallbacks is the function that will be called after the two Deferred objects are resolved, so that the DOM is ready and the AJAX call has been made and succeeded.

See the documentation for jQuery.when() and for the Deferred objects