What does this.async() do in JavaScript

var done = this.async() is a pattern used in Grunt to help perform asynchronous functions within a Task.

You need to invoke done() or done(returnValues) to tell Grunt the task is complete (after your chain of asynchronous tasks).

Read more about it: https://gruntjs.com/inside-tasks#inside-all-tasks

var done = this.async() and done(blah) is a clever trick to return a value fetched from asynchronous call (e.g. $.get) within a synchronous function.

Let's see an example:

var getText = function() {
  return "hello";
};
var text = getText();

It's a pretty straightforward function call so no puzzle here. However, what if you need to fetch the text asynchronously in getText() function?

var getText = function() {
  return $.get('<some-url>', function(text) {
    return text;
  });  // ??????
};

call to getText() doesn't return the text you want to get. It returns jquery's promise object.

So how do we make getText() return the text it gets from $.get() call?

var getText = function() {
  var done = this.async();
  $.get('<some-url>', function(text) {
    done(text);
  });
};
var text = getText();  // you get the expected text

Magic, right?

I don't know the inner-working of this.async() call yet. I don't know if there is a library provides that function, but you can see that Backbone.LayoutManager uses this trick https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js (search for this.async).

Also, Tim Branyen (the author of backbone layoutmanager) briefly talks about it in his video tutorial (http://vimeo.com/32765088 around 14:00 - 15:00). In the video, Tim says Ben Alman came up with that trick. Take a look at this as well https://github.com/cowboy/javascript-sync-async-foreach

I think it's a pretty neat trick to mix async and sync functions.

Cheers,