48

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?

6
  • 1
    "Using for the execution of B will start before A sometimes" Can you create a stacksnippets to demonstrate? Feb 11, 2017 at 7:21
  • @guest271314 it can be anything, more nested statements, ajax, logic etc etc
    – neoDev
    Feb 11, 2017 at 7: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 stackoverflow.com/help/mcve. Feb 11, 2017 at 7: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. Feb 11, 2017 at 7:34
  • Possible duplicate of JavaScript, Node.js: is Array.forEach asynchronous?
    – jjj
    Feb 11, 2017 at 9:13

5 Answers 5

33

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.

7
  • Should I create something like a promise to resolve after the interval ?
    – neoDev
    Feb 11, 2017 at 7: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? Feb 11, 2017 at 7:56
  • this is great. But what to do if I want to break out of the loop?
    – Nikhil VJ
    Apr 10, 2019 at 3: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, 2019 at 3: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? Apr 10, 2019 at 4:04
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*/ })
5
  • Any code after foo() will run before someAsyncTask inside the loop.
    – tiomno
    Dec 6, 2018 at 6:21
  • 2
    @tiomno yeah that's because foo is a Promise, just put that code in foo().then(() => { /*Your code here*/ }) Dec 6, 2018 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, 2019 at 3:38
  • In this approch, If I want to add some delay too with my someAsyncTask.. what is the best way to do this? Aug 30, 2019 at 11:17
  • @GauravAgrawal await new Promise(res => setTimeout(() => res(), 3000)) Sep 4, 2019 at 3:02
7

use for of

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

3
for(const elment of arrayElements) {
            await yourFunc(elment)
            await yourOtherFunc('somePatameter')
}
1
  • 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. Jan 16, 2019 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.