2

I have the following code:

function asyncLoop() {
    return new Promise(function(res, rej) {
        for(let i=0;i<=400000000;i++) {
            if(i===400000000) {console.log("done"); res();}
        }
    });
}

asyncLoop().then(()=>{console.log("then")});
console.log("out");

I am getting the following output:

done
out
then

According to my understanding of Promises, the asyncLoop should have run asynchronously and the following should have been the output:

out
done
then

What am I missing?

Improve this question
7
  • stackoverflow.com/a/5436869/1278540 then vs done Commented May 26, 2017 at 12:32
  • 1
    @DebajyotiDas that is about jQuery promises - this uses native. Commented May 26, 2017 at 12:33
  • Promises have no "magic" properties to making something asynchronous that isn't already asynchronous. They are merely a standardized notification and error handling scheme - nothing more. If the underlying operation is not asynchronous, then wrapping it in a promise will NOT somehow make it become asynchronous. Commented May 26, 2017 at 17:51
  • @jfriend00 disagreed - callback passed to then() is guaranteed to be called asynchronously even if the promise is already resolved Commented May 27, 2017 at 18:26
  • @Kos - Yeah, I knew someone would bring that up. That doesn't make the operation itself asynchronous. It just delays when the .then() handler is called and it has nothing to do with what the OP was confused with in this question as we can see by your own answer. People somehow think that promises can magically change a synchronous operation into an asynchronous operation. They don't do that. Yes, .then() is called on the next tick, but that doesn't change at all when the actual code before it is executed. If it was synchronous, it's still synchronous. That's the point to the OP. Commented May 27, 2017 at 18:27

3 Answers 3

Reset to default
3

Your loop is inside the callback that you passed to new Promise. This function is called the 'executor':

function executor(resolve, reject)

The executor is called synchronously by new Promise. The role of the executor is to set up any asynchronous events in order to have resolve or reject eventually called.

See MDN: Promise constructor parameters

This function is invoked immediately with the resolving functions as its two arguments.

The constructor will not return until the executor has completed

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You've made a wrong assumption. Promises are not meant to be async, they are used in an async context to bring an easier way to handle the calls. To make a process "kind of async", you could use setTimeout().

function asyncLoop() {
    return new Promise(function(res, rej) {
        setTimeout(function() {
            for(let i=0;i<=400000000;i++) {
                if(i===400000000) {console.log("done"); res();}
            }
        }, 0);
    });
}

asyncLoop().then(()=>{console.log("then")});
console.log("out");
Improve this answer

2 Comments

JavaScript is single-threaded and this blocks the main browser thread just as much as the original question, only on the next run of the event loop.
Indeed @jib, you're right. It's not really async, just delayed.
1

A promise is just a return value one attaches callbacks to instead of passing callbacks into a function, a convention with several benefits. See Using promises on MDN for more.

JavaScript is single-threaded with an event loop. .then and setTimeout schedule events.

All JavaScript runs on the browser's main thread, unless you create a worker:

function asyncLoop() {
  for (let i = 0; i <= 400000000; i++) {
    if (i == 400000000) {
      self.postMessage('done');
    }
  }
}

var blob = new Blob(["onmessage = " + asyncLoop.toString()],
                    {type: "text/javascript"});

var worker = new Worker(window.URL.createObjectURL(blob));

worker.onmessage = e => console.log(e.data);
worker.postMessage("start");

Improve this answer

1 Comment

Thanks for the share on Web Workers! Exploring that now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.