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 ☕️.