Using Deferred Objects As An Asynchronous Script Loader In jQuery 1.5

After playing with Deferred Objects for the first time yesterday, I've definitely gotten deferred on the brain. I've known about deferred objects for a long time and never really understood them; as such, I'm quite eager to wrap my head around exactly what it is that they are capable of doing. Last night, just after I posted my previous blog entry, it occurred to me that they might be useful for asynchronous script loading.

One deferred-oriented function that I didn't talk about yesterday was the new $.when() method. The $.when() method accepts any number of Deferred objects and resolves once all of its deferred parameters get resolved. If any of its deferred parameters fails, the $.when() promise fails.

• $.when( [Deferred [, Deferred ...]] ) :: Deferred (promise)

Since then $.when() function returns a Deferred promise, it means that you can then bind to the done(), fail(), and then() methods:

• $.when().done( function | [function] )
• $.when().fail( function | [function] )
• $.when().then( done, fail )

As I demonstrated yesterday, jQuery 1.5's rewrite of the $.ajax() method now returns a Deferred promise object; that will help us when we use the short-hand $.getScript() function to load our remote script files. But what about the DOM-ready event? It's one thing to load scripts asynchronously - it's another to know that you can use the content that they make available.

In Eric Hynds' blog comments, Julian Aubourg demonstrated that the $.Deferred() constructor could accept a function. This function is given one parameter - a deferred object instance - which it could then use to resolve or reject the deferred object returned by the constructor.

• $.Deferred( function( deferred ){ ... } ) :: Deferred

NOTE: The object returned from the $.Deferred() constructor is a Deferred object, not a promise; this means that it can still be used to mutate the state of the deferred instance.

Using this approach, we can easily create a Deferred object that resolves once jQuery's DOM-ready event has been triggered:

As you can see, we are using the resolve() method as the callback for the DOM-ready event. Now that we can do that for DOM-ready, we can easily use this deferred object in conjunction with a call to the $.when() method.

To play with this concept, I created a ColdFusion page that would dynamically generate our Javascript file. The ColdFusion code sleeps the incoming request in an attempt to mimic some network latency.

Script.cfm

As you can see, each call to this remote script page will add a "script{N}" object to the global name space.

With this page in place, I then created a test page that would use jQuery 1.5's $.when() method to load many versions of the remote script:

As you can see, we are passing 10 deferred $.getScript() results and a one-off hook into the DOM-ready event to the $.when() method. Then, we take the promise returned by $.when() and define a done() callback. The done() callback will only be invoked once all of the scripts and the DOM-ready deferred objects have been resolved. At that point, we loop over the scripts to make sure that they have loaded. Doing so results in the following console output:

Script 1: true
Script 2: true
Script 3: true
Script 4: true
Script 5: true
Script 6: true
Script 7: true
Script 8: true
Script 9: true
Script 10: true

As you can see, each script was successfully loaded before the done() callback was invoked.

When using the $.when() method in this way, there is no contract as to the order in which the Deferred arguments will be resolved. As such, there is no guarantee that the scripts will load in a top-down manner; the only promise is that they will all load before the done() callbacks get invoked. If the order of the scripts is important, I suppose you'd need something like LAB.js.

You Might Also Be Interested In: