What is the proper way to call 'render' after all async executions in controller?

Question

So here we have some application based on CompoundJS framework and some controller on it:

load('application');

action('index', function () {
    someMethodWithAsyncCallback({}, function () {
        /* async preparing some params for template */
    });

    anotherMethodWithAsyncCallback({}, function () {
        /* async preparing another params for template */
    });

    // another couple of async calls

    // rendering index template
    render('index', { /* using async params */ });
});

The question is: how to render template index after the end of all callbacks?

Maybe there is something like jQuery's $.when described in this answer?

Answer 1

Conceptually, you just need to keep track of the number of async calls returning you are waiting for, which I've illustrated in your code below. But there are loads of little libraries that make this a lot more generic, elegant and give you more control (like making sure they run in sequence and similar stuff). async.js for instance.

load('application');

action('index', function () {

    var asyncCounter = 2; // Or whatever number of async you want to complete...
    var completeFunc = function() {
        if (--asyncCounter > 0) {
            return;
        }
        // rendering index template
        render('index', { /* using async params */ });
    };

    someMethodWithAsyncCallback({}, function () {
        /* async preparing some params for template */
        completeFunc();
    });

    anotherMethodWithAsyncCallback({}, function () {
        /* async preparing another params for template */
        completeFunc();
    });

    // another couple of async calls

});