50

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?

neoDev
  • 2,879
  • 3
  • 33
  • 66
  • 1
    _"Using `for` the execution of `B` will start before `A` sometimes"_ Can you create a stacksnippets to demonstrate? – guest271314 Feb 11 '17 at 07:21
  • @guest271314 it can be anything, more nested statements, ajax, logic etc etc – neoDev Feb 11 '17 at 07:24
  • 2
    `for` loop is synchronous. `B` should not be executed before `for` loop completes. Can you demonstrate case of `B` "somtimes" starting execution before `for` loop completes? Are there asynchronous operations within `for` loop which may not be called until some time in future, after `B` has started execution? See http://stackoverflow.com/help/mcve. – guest271314 Feb 11 '17 at 07:27
  • what will appear to happen is that callbacks registered for functions doing asynchronous I/O - for example - are called after B has executed. However, the code above runs sequentially and at a later point your callbacks are being called. – Jochen Bedersdorfer Feb 11 '17 at 07:34
  • Possible duplicate of [JavaScript, Node.js: is Array.forEach asynchronous?](http://stackoverflow.com/questions/5050265/javascript-node-js-is-array-foreach-asynchronous) – jjj Feb 11 '17 at 09:13
  • loops are synchronous until you do some async operations inside, then it's async. – properchels Jan 30 '20 at 06:57

5 Answers5

35

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.

james emanon
  • 11,185
  • 11
  • 56
  • 97
  • Should I create something like a promise to resolve after the interval ? – neoDev Feb 11 '17 at 07:55
  • well, not in your original question because given a standard loop - it will always run to completion before "BBB" happens. BUT, my guess is that you have some sort async operation that "might take some time" and then "BBB" comes before, is that correct? – james emanon Feb 11 '17 at 07:56
  • this is great. But what to do if I want to break out of the loop? – Nikhil VJ Apr 10 '19 at 03:20
  • 2
    darnit this isn't a "synchronous" type loop - all the timeouts are being fired off at the same time; it's just the wait that's being staggered by `1000 * idx` – Nikhil VJ Apr 10 '19 at 03:29
  • you could add a break; statement. Instead of using let i, use let a,b,c , a for first loop, b for second etc.. and then for example, in the inner loop type: if (a >= 1) break;, and you'll see that the other parts of the loops do not run. Is that what you mean? – james emanon Apr 10 '19 at 04:04
  • all console.log are being fired at the same time – letanthang Mar 05 '21 at 04:30
  • correct, if you want to verify the closure worked, just add the i in the console log. If you wanted the setTimeouts to fire every two seconds, just do as suggested above and do 2000 * i – james emanon Oct 28 '21 at 19:08
24

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*/ })
Fernando Carvajal
  • 1,869
  • 20
  • 19
  • Any code after foo() will run before `someAsyncTask` inside the loop. – tiomno Dec 06 '18 at 06:21
  • 2
    @tiomno yeah that's because foo is a Promise, just put that code in `foo().then(() => { /*Your code here*/ })` – Fernando Carvajal Dec 06 '18 at 17:10
  • Thank you! This is a true asynchronous loop, because each run is waiting for the previous one before firing. I'm able to 'skip' out when a condition is met by simply skipping the `someAsyncTask()` function call but still executing `next()` so that the `then..` part is done regardless. This should be the chosen answer. – Nikhil VJ Apr 10 '19 at 03:38
  • In this approch, If I want to add some delay too with my `someAsyncTask`.. what is the best way to do this? – Gaurav Agrawal Aug 30 '19 at 11:17
  • @GauravAgrawal await new Promise(res => setTimeout(() => res(), 3000)) – Fernando Carvajal Sep 04 '19 at 03:02
8

use for of

for(let item of items) {
    await yourASyncFunctions(item);
}
jales cardoso
  • 591
  • 7
  • 11
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.

Laode Muhammad Al Fatih
  • 3,994
  • 1
  • 18
  • 32
4
for(const elment of arrayElements) {
            await yourFunc(elment)
            await yourOtherFunc('somePatameter')
}
Italo José
  • 1,558
  • 1
  • 17
  • 50
  • 14
    While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Kurt Van den Branden Jan 16 '19 at 14:19