jQuery 1.5 Deferreds

Eric Hynds on his blog the other day gave a very good run down of jQuery 1.5 Deferreds. From the post:


Deferreds, new in jQuery 1.5, decouple logic dependent on the outcome of a task from the task itself. They’re nothing new to the JavaScript scene; Mochikit and Dojo have implemented them for some time, but with Julian Aubourg’s AJAX rewrite landing in 1.5, deferreds in jQuery was the logical next step. With deferreds, multiple callbacks can be bound to a task’s outcome, and any of these callbacks can be bound even after the task is complete. The task in question may be asynchronous, but not necessarily.



Especially nice is being able to couple multiple statements and once they finish being able to go on to the next step.

In the following example, we retrieve JSON data and a separate template, once the calls finish we move onto rendering them using Underscore.js templating.




var JSONData = {};
var template = "";
function loadData(data){
JSONData = data;
}

function loadTemplate(data){
template = data;
}

function render {
var output = _.template(template, { employeeList : employeeList } );
$(document.getElementById("output")).html(output);
}

$.when(
$.getJSON("JSONData").success(loadData),
$.get("template.tmpl").success(loadTemplate)
).then(
render
);


Deferreds in jQuery is step in the right direction and adds in some very nice functionality to an already feature rich library.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>