How can I manage complicated async processing in JavaScript?

Question

I'm starting up a web application that have multiple procedure which takes some time. To reduce loading time, I want to implement async processing like following:

loadXML()-----
              \
loadCanvas()---setupCanvas()
                            \
setupYoutubePlayer()---------startApplication()

That is, when page is loaded, I want to start loadXML(), loadCanvas() and setupYoutubePlayer() simultaneously, and fire setupCanvas() when loadXML() and loadCanvas() is done, and setupApplication() to fire after setupCanvas() and setupYoutubePlayer() is done.

loadXML() and setupCanvas() contains AJAX processing, and setupYoutubePlayer() contains API access and is required API-specified callback function (onYouTubeIframeAPIReady()).

After some days of googling, I found jQuery.Deffered and Async.js. Speaking about Deffered, I could wrap all processes by Deferred.promise() and Deferred.resolve(), but I found no easy solution to implement this nested async processing using when() and then(). And as for Async.js, I have no idea to deal with setupYoutubePlayer().

I missed something? Or are there another knowledge in this case? Please help. Thanks.

Esailija · Accepted Answer · 2014-03-12 09:21:38Z

2

This is super trivial and even with just jQuery promises (assuming 1.8+) you can do:

var xml = loadXML();
var canvas = loadCanvas();
var youtubePlayer = setupYoutubePlayer();
$.when(
    $.when(xml, canvas).then(setupCanvas),
    youtubePlayer
).then(startApplication);

answered Mar 12, 2014 at 9:21

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anddoutoi · Accepted Answer · 2014-03-12 09:18:53Z

2

Make yourself a favor and use a real promise implementation and forget about the roflmaolol implementation in jQuery.

Have a look at http://www.promisejs.org/ (http://www.promisejs.org/intro/#all to be more specific), they have code examples of all sorts of usecases and a list of several different promise libs. Some of the libs is minimal barebone and others offer extensions to the promise spec.

If I understood your flow correct this would probably do it:

var a = loadXML();
var b = loadCanvas();
Promise.all([a, b]).then( function() {
    var c = setupCanvas();
    var d = setupYoutubePlayer();
    return Promise.all([c, d]);
} ).done( startApplication );

Or if setupYoutubePlayer can be called in the same step as the loadXML and loadCanvas functions:

var a = loadXML();
var b = loadCanvas();
var c = setupYoutubePlayer();
Promise.all([a, b]).then( function() {
    var d = setupCanvas();
    return Promise.all([c, d]);
} ).done( startApplication );

One could probably optimize the above code further but I leave that as en exercise to the reader ;)

edited Mar 12, 2014 at 9:18

answered Mar 12, 2014 at 9:01

anddoutoi

10.1k4 gold badges31 silver badges28 bronze badges

1 Comment

Bikas Over a year ago

Simple and best. This is what I would suggest but o already have answered it very well. Kudos

Tommi Gustafsson · Accepted Answer · 2014-03-12 09:05:25Z

0

You can also use Iced CoffeeScript, which gives you await and defer keywords to handle asynchronous callbacks in a synchronous fashion.

answered Mar 12, 2014 at 9:05

Tommi Gustafsson

1,8604 gold badges17 silver badges20 bronze badges

Collectives™ on Stack Overflow

How can I manage complicated async processing in JavaScript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related