synchronous and asynchronous loops in javascript

Question

Are loops synchronous or asynchronous in JavaScript? (for, while, etc)

Supposing I have:

for(let i=0; i<10; i++){
    // A (nested stuff...)
}

// B ...

Using for the execution of B will start before A sometimes... (so asynchronous)

Is there a way to use statements in a synchronous way?

Answer 1

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.

Answer 2

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*/ })

Answer 3

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);
    }
});

Answer 4

Alternative to Get Synchronous For Loop with Make Custom Function Like This:

 // Declare sync function, sync function is subtitute synchronous for loop in node js !!! let sync= (length,process,finish,iteration = 0)=>{ if(iteration != length){ let wait= ()=>{ return new Promise(resolve=>{ process(resolve,iteration,length); }); } let nextIteration; if(length > iteration){ nextIteration= iteration+1; }else{ nextIteration= iteration-1; } wait().then((newIteration = nextIteration)=>{ return sync(length,process,finish,newIteration); }); }else{ finish(); } } // Code Above Just Declare The sync() function We Will Use After This !!! /** sync(param1,param2,param3,param4) 1.param1= the number of iterations you want, type= number; 2.param2= the process that will run when the loop is running, type= function with 3 parameters =>( a.the first parameter is useful to replace the return or break command in the forloop function,you just call the first parameters with parameters() if you want to end forloop in this iteration. b.the second parameters will give the number of iteration, type= number. c.the third parameters give the total of forloop length, type= number. ); 3.param3= the function you want to call when the loop is complete, type= function ; 4.param4= the number at the start of the iteration you want, default is zero (0); **/ // Example : /** Forloop function like for(i;x;i++), can't make synchronous forloop without custom flow; **/ //I Want To Print "Finished" After 10 Seconds Countdown !!! sync(0 /** end loop count **/,(end,index)=>{ console.log(index); setTimeout(()=>{ end(); /** in every iteration I want to reduce one index to make a countdown. **/ },1000) },()=>{ /** put here the statements you want to run after forloop finish execute ! **/ console.log("Finished"); },10 /** start loop count **/); 

Answer 5

First of all, your statement about " Using for the execution of B will start before A sometimes... (so asynchronous) " is wrong.

The loop function (like while , for , .forEach or .map ) in Javascript will be run synchronously ( blocking ), whether you run it in a Browser or Runtime Environment like NodeJS . We can prove it by running the code below ( maybe the process will take a few seconds ):

 let counter1 = 0 let counter2 = 0 let counter3 = 0 console.log("Start iteration") console.time("Time required") // First heavy iteration for (let i = 0; i < 1000; i++) { counter1 += 1 // Second heavy iteration for (let i2 = 0; i2 < 1000; i2++) { counter2 += 1 // Third heavy iteration for (let i3 = 0; i3 < 1000; i3++) { counter3 += 1 } } } console.log("Iteration was successful") console.timeEnd("Time required") console.log('The value of `counter1` is: ' + counter1) console.log('The value of `counter2` is: ' + counter2) console.log('The value of `counter3` is: ' + counter3)

And then what kind of looping causes your code to run asynchronously ( non blocking )?

The answer is:

The code that is placed inside the Promise callback or the function with the async keyword or some native functions with callback (not all) like setTimeout , setInterval and etc will be run asynchronously .

Example:

 setTimeout(() => { console.log('A') }) console.log('B')

In code, setTimeout function is declared first. However, the output of the code shows that the console.log('B') function run earlier than the setTimeout function.

Answer 6

for(const elment of arrayElements) {
            await yourFunc(elment)
            await yourOtherFunc('somePatameter')
}