Deferreds are awesome. They are such a simple solution to a really hard problem. Keeping things async in javascript can get hard sometimes. I recently wrote some code that looked like this:
var settings = {
template: 'todo.hbs',
data_src: '/todo.json'
};
var template;
var getting_template;
var getting_data;
if ('template' in settings) {
getting_template = $.get(settings.template);
getting_template.done(function(t) {
template = t;
});
if ('data_src' in settings) {
getting_data = $.get(settings.data_src);
getting_data.done(function(data) {
render(template, data);
});
} else {
getting_template.done(function(t) {
render(t, {});
});
}
} else {
render('', {});
}
(I am pretty sure it wasn't necessarily as ugly but, I don't quite remember.)
As you can see, even though I am making use of the deferreds returned by the $.get
function. This could be cleaned up a lot by using even more deferreds.
Here's more or less what the code ended up looking like:
var settings = {
template: 'todo.hbs',
data_src: '/todo.json'
};
var templateDefer = new $.Deferred();
var dataDefer; = new $.Deferred();
if ('template' in settings) {
$.get(settings.template, function(template) {
templateDefer.resolve(template);
});
} else {
templateDefer.resolve('');
}
if ('data_src' in settings) {
$.get(settings.data_src, function(data) {
dataDefer.resolve(data);
});
} else {
dataDefer.resolve({});
}
$.when(templateDefer, dataDefer).done(function(template, data) {
render(template, data);
});
I basically kept everything async using stand-alone deferreds. Turns out jQuery has really handy deferred util built-in, all you have to do is create a new one (new $.Deferred()
). The other handy thing built into jQuery is the $.when
method, you can basically pass in a bunch of deferreds and you'd get a single one that responds when all of them respond in a particular way. That way, you can basically say, when they are all done, do this.
I shall try experimenting a lot more with these tools, they are pretty easy to use and pack in, so much functionality.
Recommended links
Here's a couple of recommended links, in case you want to learn more about deffereds, in particular, those built into jQuery:
- jQuery's Deferred Object Documentation
- jQuery Deferreds promises asynchronous bliss
- Promises A+ Spec
Have a comment? Feel free to
email me.
Did you enjoy this post?
Buy me a coffee ☕️.