How to ensure all async function return before doing callback
<p>I have this code:</p>

<pre><code>var submitOrder = function (event) {
    var ids = $('.selected').map(function () { return $(this).data('id'); }).get();
    getURLS(ids, function(res) {
        console.log(res);
    });
};

var getURLS = function (ids, callback) {
    var users = new Object();
    var num = ids.length - 1;
    var retif = function(){
        console.log('hitting with ' + num);
        if (num == 0){
            callback(users);
        } else {
            num--;
        }
    }
    for(id in ids) {
        var query = FB.Data.query('SELECT src_big FROM photo WHERE pid in (SELECT cover_pid FROM album WHERE owner=\'' + ids[id] + '\' AND type=\'profile\')');
        query.wait(function (rows) {
            users[ids[id]] = rows[0].src_big;
            retif();
        });
    }
}
</code></pre>

<p>However, when I examine the console logs in my browser, I see the correct number of API calls made, but only one result is in the Object.</p>

<p>Is there some "better" way that I can write this that would ensure a correct output?</p>
