I’ve encountered a couple issues with javascript race conditions this last week, especially in the Chrome browser.

A race condition is where the timing of one event is critically tied to other events which need to happen before it in sequence. In both situations I was enqueing a javascript file, but I also had inline javascript that wouldn’t work until the enqueued file had completely finished loading.

What’s odd is that these scripts worked fine in Firefox and Internet explorer, it just wasn’t loading correctly in Chrome, perhaps because its faster javascript rendering. To fix the issue, I added a check in the inline javascript which looks for the function it relies on in the enqued javascript. If that function isn’t present yet, it will delay the load of the inline script until it’s ready.

In this example, the function I was waiting for was AjaxUpload. Here’s the code that does the check:

// Race condition to make sure js files are loaded
if (typeof AjaxUpload != 'function') { 
     return ++counter < 6 && window.setTimeout(init, counter * 500);
}

I’m by no means a javascript expert, but I thought I’d share this in case other folks are having similar issues. Has this come up in any of your projects?