jQuery wait for .then() callback function is completed by promise object

Question

I have the code in native JavaScript (I simplified it):

var finalArray = [];

for (var i; i < 3; i++) {
    var a = -1;  // set the default value
    var b = Math.random();

    ymaps.route(someArray[i]).then(function (res) {
        a = res.getCoordinates();     
    });

    finalArray.push([a, b]);
}

console.log(finalArray);

There is some third-party framework called ymaps which has a method route which returns a promise object. Problem cases in that I need to wait until promise.then callback function is done, then continue the main code with function finalArray.push([a, b]);, or, rather, synchronize asyncronous processes.

Result of code I wrote above is

[
    [-1, /*random*/],
    [-1, /*random*/],
    [-1, /*random*/]
]

But instead of -1 - the default var a value, some plural number (changed var a in promise.then callback function) must be there.

Answer 1

You cannot just "continue with the main code". Promises are asynchronous, and your callback (that assigns a) will be executed only after you have tried to use a in finalArray.push([a, b]);. See Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference.

Instead, you will need to put your main code in a callback as well. You can get another promise for the results of all three loop-generated promises, see Pass in an array of Deferreds to $.when().

function makePromise(a, b) {
    // scope necessary for closure
    return ymaps.route(someArray[i]).then(function(res) {
        a = res.getCoordinates();
        return [a, b];
    });
}

var promises = [];
for (var i; i < 3; i++)
    promises.push(makePromise(-1, Math.random()));
$.when.apply($, promises).then(function() {
    var finalArray = Array.prototype.slice.call(arguments);
    console.log(finalArray);
});