How can i wait for asynchronous events in Javascript?

Question

I'm new to JavaScript, and still not familiar with asynchronous functions...

I'm working with node.js to create a chat server, this is a part of my code that's listen to getListConnected event and when it triggered it look for all connected clients in a given namespace, and then for each client i store his 'username' to another array, convert it to json response and then send:

socket.on('getListConnected', function(msg){
                        var clients = namespace.clients();//get all client in that nsp
                        var usernames = Array() ;//init array

                        for(i in clients)//for each clients
                        {
                           clients[i].get("username", function(value){
                               usernames.push(value);
                            });
                        }
                       socket.emit('getListConnected',JSON.stringify(usernames));//send
                    });

The problem with this code is the client.get() method is asynchronous witch means that usernames are sent empty.

How can i wait for usernames until it's filled, or how can i wait for the loop until it's finished ?

Answer 1

You could use middleware for promises, something like Bluebird, or you could keep a counter to check if all usernames have been gotten, something like

socket.on('getListConnected', function (msg) {
    var clients   = namespace.clients();
    var usernames =  [];
    var counter1  =  0;
    var counter2  =  0;

    for (i in clients) {

        counter1++; // number of clients

        clients[i].get("username", function (value) {
            usernames.push(value);
            counter2++; // number of clients added to array

            if (counter1 === counter2) {
                socket.emit('getListConnected', JSON.stringify(usernames));
            }

        });
    }

});

Answer 2

Here's a Bluebird example, customised for your situation: [it borrows heavily from Victor Quinn's Example]

Using the same Promise definition that Victor used:

var Promise = require('bluebird');

var promiseWhile = function(condition, action) {
    var resolver = Promise.defer();

    var loop = function() {
        if (!condition()) return resolver.resolve();
        return Promise.cast(action())
            .then(loop)
            .catch(resolver.reject);
    };

    process.nextTick(loop);

    return resolver.promise;
};

Instantiated with your custom call:

var i = 0;
promiseWhile(function() {
    return i < clients.length;
}, function(value) {
    return new Promise(function(resolve, reject) {
        clients[i].get("username", function(value){
                                       usernames.push(value);
            });
            i++;
            resolve();
    });
}).then(function() {
    console.log("usernames are: " + usernames);
});