CODEWITHSUNDEEP
javascriptasynchronous
Idiot
Idiot

Reputation: 23

Why is this async function is running synchronously?

I have some code here...

async function test() {
    for(let i = 0; i < 10000; i++){
        console.log("test");
    }
}

console.log("a");
test();
console.log("b");

Now my understanding is that test() here should run asynchronously and if I would want to run a routine after it's completion I would use .then() after it.

I'm not doing that here though so surely it should just do it's thing in the background while everything else contiunes running? With that understanding I would expect some output like this:

a
b
test
test
..etc

However what I actually get is this...

a
test
test
...etc

b

Why does this happen? It seems that console.log("b") waits until test() completes but that's synchronous behaviour.

Apologies if something similar has been asked before but I couldn't find anything on this myself.

Upvotes: 2

Views: 1356

Answers (5)

GenericUser
GenericUser

Reputation: 3230

Setting something as async will wrap the return object into a Promise. Promises are used to deal with asynchronous behavior, but there's nothing inherently asynchronous about the content of the test function. If instead you were to wrap the contents into a setTimeout function, that would cause a delay which would mimic asynchronous behavior and match the outcome you were expecting.

async function test() {
  setTimeout(() => {
    for(let i = 0; i < 2; i++){
        console.log("test");
    }
  })
}

console.log("a");
test();
console.log("b")

If you're looking to set up background tasks that can lock up the browser's main thread, you should check out WebWorkers. They are a way to offload performance impacting tasks onto a separate thread.

Upvotes: 4

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92347

async keyword don't mean that function wil run asynchronously. To run it asynchronously use setTimeout or Promise etc.

function test() {
  setTimeout(() => {
    for(let i = 0; i < 3; i++){
        console.log("test");
    }
  });
}

console.log("a");
test();
console.log("b");

Async keyword usually is used with Promises and await keyword to write async code in synchronous way (to use await keyword we need put code inside async function)

function test() {
  return new Promise( res => {
    for(let i = 0; i < 3; i++){
        console.log("test");
    }
    res();
  });
}

async function start() {
  console.log("a");
  await test();
  console.log("b");
}

start();

Upvotes: 0

supakeen
supakeen

Reputation: 2914

From MDN:

An async function can contain an await expression, that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

If you do not have an await expression you are never 'pausing' the coroutine and it will execute synchronously without letting other functions run.

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 370679

Synchronous code inside an async function runs synchronously. The interpreter will only move on to the next line after the call of the async function (here, the console.log("b");) after all synchronous code has finished - for example, if it runs into an await.

Here, since there's no await or anything asynchronous at all going on in test, test runs to the end before the next line (that logs b) runs.

It's pretty similar to how the Promise constructor runs.

Upvotes: 2

Hamza Mogni
Hamza Mogni

Reputation: 720

an async function means that what is inside the function is expected to have some asynchronous calls. like if you had an Http call inside your test function.

and since nothing is asynchronous inside your function (you only have a normal loop) then your function will execute normally and sequentially until it finishes executing.

Upvotes: 0

Related Questions