synchronous and asynchronous loops in javascript

If you place asynchronous loops inside a for...loop and want to stop the loop until each operation ends, you must use the async/await syntax like this.

async function foo() {
    var array = [/* some data that will be used async*/]

    //This loop will wait for each next() to pass the next iteration
    for (var i = 0; i < array.length; i++) { 
        await new Promise(next=> {
            someAsyncTask(array[i], function(err, data){
                /*.... code here and when you finish...*/
                next()
            })
        })        
    }
}

foo().then(() => { /*After foo execution*/ })

let items = YourArray;
let i = 0;
await new Promise(async (resolve, reject) => {
    try {
        if (items.length == 0) return resolve();
        let funSync = async () => {
            await yourASyncFunctions(items[i].doAnything);
            i++;
            if (i == items.length) resolve();
            else funSync();
        }
        funSync();
    } catch (e) {
        reject(e);
    }
});

The for loop runs immediately to completion while all your asynchronous operations are started.

Well, here we have some nested loops. Notice, "BBB" always fires after.

for(let i=0; i<10; i++){
   for(let i=0; i<10; i++){
     for(let i=0; i<10; i++){
       console.log("AA")
     }
   }
}

console.log('BBB')

now, look at this

for(let i=0; i<10; i++){
   setTimeout(function() {console.log("AA")}, 2000)
}

console.log('BBB')

This is because of something called the "event loop". And the fact that with that setTimeout we are simulating an async operation. It could be an ajax call or some other async process.

Check this out: http://latentflip.com/loupe

This will really help you understand these sorts of async/sync loop topics.

updated to show how promises might work here (given comments below):

var stringValues = ['yeah', 'noooo', 'rush', 'RP'];
var P = function(val, idx){
    return new Promise(resolve => setTimeout(() => resolve(val), 1000 * idx));
};


// We now have an array of promises waiting to be resolved.
// The Promise.all basically will resolve once ALL promises are 
// resolved. Keep in mind, that if at any time something rejects
// it stops

// we iterator over our stringValues array mapping over the P function, 
// passing in the value of our array.
var results = Promise.all(stringValues.map(P));

// once all are resolved, the ".then" now fires. It is here we would do 
results.then(data => 
    console.log(data) //["yeah", "noooo", "rush", "RP"]
);

let me know if I am not clear enough.