What does this.async() do in JavaScript

Question

Kept on seeing this pattern in code, but couldn't find any reference to it in google or SO, strange. Can someone point me to reference for this.async() function?

  var done = this.async();
  // ...
  $.get(path, function(contents) { // or some other function with callback
    // ...
    done(JST[path] = tmpl);
  })

Answer 1

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,

Answer 2

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