Why does Async/Await work properly when the loop is inside the async function and not the other way around?
I have three snippets that loop three times while await
ing on a promise
.
In the first snippet, it works as I expect and the value of i
is decremented with each await
.
let i = 3;
(async () => {
while (i) {
await Promise.resolve();
console.log(i);
i--;
}
})();
Output:
3
2
1
In the second one, the value of i
is continuously decremented until it reaches zero and then all the await
s are executed.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
})();
i--;
}
Output:
0
0
0
Lastly, this one causes an Allocation failed - JavaScript heap out of memory
error and doesn't print any values.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
Can someone explain why they exhibit these different behaviors? Thanks.
javascript async-await es6-promise
add a comment |
I have three snippets that loop three times while await
ing on a promise
.
In the first snippet, it works as I expect and the value of i
is decremented with each await
.
let i = 3;
(async () => {
while (i) {
await Promise.resolve();
console.log(i);
i--;
}
})();
Output:
3
2
1
In the second one, the value of i
is continuously decremented until it reaches zero and then all the await
s are executed.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
})();
i--;
}
Output:
0
0
0
Lastly, this one causes an Allocation failed - JavaScript heap out of memory
error and doesn't print any values.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
Can someone explain why they exhibit these different behaviors? Thanks.
javascript async-await es6-promise
9
Do you know howasync function
s desugar to promises?
– Bergi
yesterday
@Bergi It's just a syntactic sugar for dealing with promises instead of using the.then()
and.catch()
methods. Am I right ?
– Ahmed Karaman
12 hours ago
Yes, basically. So what do you think would your code look like if written withthen()
?
– Bergi
12 hours ago
For the second snippet, it would be:while (i) { Promise.resolve().then(res => console.log(i)); i--; }
– Ahmed Karaman
11 hours ago
Exactly. And it seems obvious now why this logs0
three times.
– Bergi
10 hours ago
add a comment |
I have three snippets that loop three times while await
ing on a promise
.
In the first snippet, it works as I expect and the value of i
is decremented with each await
.
let i = 3;
(async () => {
while (i) {
await Promise.resolve();
console.log(i);
i--;
}
})();
Output:
3
2
1
In the second one, the value of i
is continuously decremented until it reaches zero and then all the await
s are executed.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
})();
i--;
}
Output:
0
0
0
Lastly, this one causes an Allocation failed - JavaScript heap out of memory
error and doesn't print any values.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
Can someone explain why they exhibit these different behaviors? Thanks.
javascript async-await es6-promise
I have three snippets that loop three times while await
ing on a promise
.
In the first snippet, it works as I expect and the value of i
is decremented with each await
.
let i = 3;
(async () => {
while (i) {
await Promise.resolve();
console.log(i);
i--;
}
})();
Output:
3
2
1
In the second one, the value of i
is continuously decremented until it reaches zero and then all the await
s are executed.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
})();
i--;
}
Output:
0
0
0
Lastly, this one causes an Allocation failed - JavaScript heap out of memory
error and doesn't print any values.
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
Can someone explain why they exhibit these different behaviors? Thanks.
javascript async-await es6-promise
javascript async-await es6-promise
edited yesterday
Ahmed Karaman
asked yesterday
Ahmed KaramanAhmed Karaman
34719
34719
9
Do you know howasync function
s desugar to promises?
– Bergi
yesterday
@Bergi It's just a syntactic sugar for dealing with promises instead of using the.then()
and.catch()
methods. Am I right ?
– Ahmed Karaman
12 hours ago
Yes, basically. So what do you think would your code look like if written withthen()
?
– Bergi
12 hours ago
For the second snippet, it would be:while (i) { Promise.resolve().then(res => console.log(i)); i--; }
– Ahmed Karaman
11 hours ago
Exactly. And it seems obvious now why this logs0
three times.
– Bergi
10 hours ago
add a comment |
9
Do you know howasync function
s desugar to promises?
– Bergi
yesterday
@Bergi It's just a syntactic sugar for dealing with promises instead of using the.then()
and.catch()
methods. Am I right ?
– Ahmed Karaman
12 hours ago
Yes, basically. So what do you think would your code look like if written withthen()
?
– Bergi
12 hours ago
For the second snippet, it would be:while (i) { Promise.resolve().then(res => console.log(i)); i--; }
– Ahmed Karaman
11 hours ago
Exactly. And it seems obvious now why this logs0
three times.
– Bergi
10 hours ago
9
9
Do you know how
async function
s desugar to promises?– Bergi
yesterday
Do you know how
async function
s desugar to promises?– Bergi
yesterday
@Bergi It's just a syntactic sugar for dealing with promises instead of using the
.then()
and .catch()
methods. Am I right ?– Ahmed Karaman
12 hours ago
@Bergi It's just a syntactic sugar for dealing with promises instead of using the
.then()
and .catch()
methods. Am I right ?– Ahmed Karaman
12 hours ago
Yes, basically. So what do you think would your code look like if written with
then()
?– Bergi
12 hours ago
Yes, basically. So what do you think would your code look like if written with
then()
?– Bergi
12 hours ago
For the second snippet, it would be:
while (i) { Promise.resolve().then(res => console.log(i)); i--; }
– Ahmed Karaman
11 hours ago
For the second snippet, it would be:
while (i) { Promise.resolve().then(res => console.log(i)); i--; }
– Ahmed Karaman
11 hours ago
Exactly. And it seems obvious now why this logs
0
three times.– Bergi
10 hours ago
Exactly. And it seems obvious now why this logs
0
three times.– Bergi
10 hours ago
add a comment |
4 Answers
4
active
oldest
votes
Concerning your second snippet:
Caling an async function without awaiting it's result is called fire and forget. You tell JavaScript that it should start some asynchronous processing, but you do not care when and how it finishes. That's what happens. It loops, fires some asynchronous tasks, when the loop is done they somewhen finish, and will log 0 as the loop already reached its end. If you'd do:
await (async () => {
await Promise.resolve();
console.log(i);
})();
it will loop in order.
Concerning your third snippet:
You never decrement i
in the loop, therefore the loop runs forever. It would decrement i
if the asynchronous tasks where executed somewhen, but that does not happen as the while loop runs crazy and blocks & crashes the browser.
let i = 3;
while(i > 0) {
doStuff();
}
add a comment |
Focusing primarily on the last example:
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
It may help if we rewrite the code without async/await to reveal what it is really doing. Under the hood, the code execution of the async function is deferred for later:
let callbacks = ;
let i = 0;
while (i > 0) {
callbacks.push(() => {
console.log(i);
i--;
});
}
callbacks.forEach(cb => {
cb();
});
As you can see, none of the callbacks are executed until after the loop is completed. Since the loop never halts, eventually the vm will run out of space to store callbacks.
add a comment |
Because in the first case console.log and decrement work in sync with each other because they are both inside the same asnychronous function.
In the second case console.log works asynchronously and decrement works synchronously.
Therefore, the decrement will be executed first, the asynchronous function will wait for the synchronous function to finish, then it will be executed with i == 0
In the third case, the loop body executes synchronously, and runs the asynchronous function at each iteration. Therefore, the decrement can not work until the end of the loop, so the condition in the cycle is always true. And so until the stack or memory is full
New contributor
add a comment |
In your particular example it decrements the i
and then runs the async
code like:
let i = 3;
while (i) {
i--; // <---------------------
(async () => { // |
await Promise.resolve();// |
console.log(i); // |
})(); // |
// >---------------------------
}
Regarding your third snippet, it will never decrease the i
value and so loop runs forever and thus crashes application:
let i = 3;
while (i) {
(async () => {
await Promise.resolve(); // await and resolve >-----------
// the following code doesn't run after it resolves // |
console.log(i); // |
i--; // |
})(); // |
// out from the (async() => {})() <-------------------------
}
Not really, If you would remove theawait Promise.resolve
it would log correctly.
– Jonas Wilms
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have anasync
function without anawait
in its body that it will be blocking and run synchronously like any other function?
– Ahmed Karaman
yesterday
2
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but thei
would be equal to zero eventually.
– meze
yesterday
1
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.
– Joel Cornett
yesterday
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55323666%2fwhy-does-async-await-work-properly-when-the-loop-is-inside-the-async-function-an%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Concerning your second snippet:
Caling an async function without awaiting it's result is called fire and forget. You tell JavaScript that it should start some asynchronous processing, but you do not care when and how it finishes. That's what happens. It loops, fires some asynchronous tasks, when the loop is done they somewhen finish, and will log 0 as the loop already reached its end. If you'd do:
await (async () => {
await Promise.resolve();
console.log(i);
})();
it will loop in order.
Concerning your third snippet:
You never decrement i
in the loop, therefore the loop runs forever. It would decrement i
if the asynchronous tasks where executed somewhen, but that does not happen as the while loop runs crazy and blocks & crashes the browser.
let i = 3;
while(i > 0) {
doStuff();
}
add a comment |
Concerning your second snippet:
Caling an async function without awaiting it's result is called fire and forget. You tell JavaScript that it should start some asynchronous processing, but you do not care when and how it finishes. That's what happens. It loops, fires some asynchronous tasks, when the loop is done they somewhen finish, and will log 0 as the loop already reached its end. If you'd do:
await (async () => {
await Promise.resolve();
console.log(i);
})();
it will loop in order.
Concerning your third snippet:
You never decrement i
in the loop, therefore the loop runs forever. It would decrement i
if the asynchronous tasks where executed somewhen, but that does not happen as the while loop runs crazy and blocks & crashes the browser.
let i = 3;
while(i > 0) {
doStuff();
}
add a comment |
Concerning your second snippet:
Caling an async function without awaiting it's result is called fire and forget. You tell JavaScript that it should start some asynchronous processing, but you do not care when and how it finishes. That's what happens. It loops, fires some asynchronous tasks, when the loop is done they somewhen finish, and will log 0 as the loop already reached its end. If you'd do:
await (async () => {
await Promise.resolve();
console.log(i);
})();
it will loop in order.
Concerning your third snippet:
You never decrement i
in the loop, therefore the loop runs forever. It would decrement i
if the asynchronous tasks where executed somewhen, but that does not happen as the while loop runs crazy and blocks & crashes the browser.
let i = 3;
while(i > 0) {
doStuff();
}
Concerning your second snippet:
Caling an async function without awaiting it's result is called fire and forget. You tell JavaScript that it should start some asynchronous processing, but you do not care when and how it finishes. That's what happens. It loops, fires some asynchronous tasks, when the loop is done they somewhen finish, and will log 0 as the loop already reached its end. If you'd do:
await (async () => {
await Promise.resolve();
console.log(i);
})();
it will loop in order.
Concerning your third snippet:
You never decrement i
in the loop, therefore the loop runs forever. It would decrement i
if the asynchronous tasks where executed somewhen, but that does not happen as the while loop runs crazy and blocks & crashes the browser.
let i = 3;
while(i > 0) {
doStuff();
}
edited 16 hours ago
answered yesterday
Jonas WilmsJonas Wilms
63.3k53457
63.3k53457
add a comment |
add a comment |
Focusing primarily on the last example:
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
It may help if we rewrite the code without async/await to reveal what it is really doing. Under the hood, the code execution of the async function is deferred for later:
let callbacks = ;
let i = 0;
while (i > 0) {
callbacks.push(() => {
console.log(i);
i--;
});
}
callbacks.forEach(cb => {
cb();
});
As you can see, none of the callbacks are executed until after the loop is completed. Since the loop never halts, eventually the vm will run out of space to store callbacks.
add a comment |
Focusing primarily on the last example:
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
It may help if we rewrite the code without async/await to reveal what it is really doing. Under the hood, the code execution of the async function is deferred for later:
let callbacks = ;
let i = 0;
while (i > 0) {
callbacks.push(() => {
console.log(i);
i--;
});
}
callbacks.forEach(cb => {
cb();
});
As you can see, none of the callbacks are executed until after the loop is completed. Since the loop never halts, eventually the vm will run out of space to store callbacks.
add a comment |
Focusing primarily on the last example:
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
It may help if we rewrite the code without async/await to reveal what it is really doing. Under the hood, the code execution of the async function is deferred for later:
let callbacks = ;
let i = 0;
while (i > 0) {
callbacks.push(() => {
console.log(i);
i--;
});
}
callbacks.forEach(cb => {
cb();
});
As you can see, none of the callbacks are executed until after the loop is completed. Since the loop never halts, eventually the vm will run out of space to store callbacks.
Focusing primarily on the last example:
let i = 3;
while (i) {
(async () => {
await Promise.resolve();
console.log(i);
i--;
})();
}
It may help if we rewrite the code without async/await to reveal what it is really doing. Under the hood, the code execution of the async function is deferred for later:
let callbacks = ;
let i = 0;
while (i > 0) {
callbacks.push(() => {
console.log(i);
i--;
});
}
callbacks.forEach(cb => {
cb();
});
As you can see, none of the callbacks are executed until after the loop is completed. Since the loop never halts, eventually the vm will run out of space to store callbacks.
answered yesterday
Joel CornettJoel Cornett
17.9k44270
17.9k44270
add a comment |
add a comment |
Because in the first case console.log and decrement work in sync with each other because they are both inside the same asnychronous function.
In the second case console.log works asynchronously and decrement works synchronously.
Therefore, the decrement will be executed first, the asynchronous function will wait for the synchronous function to finish, then it will be executed with i == 0
In the third case, the loop body executes synchronously, and runs the asynchronous function at each iteration. Therefore, the decrement can not work until the end of the loop, so the condition in the cycle is always true. And so until the stack or memory is full
New contributor
add a comment |
Because in the first case console.log and decrement work in sync with each other because they are both inside the same asnychronous function.
In the second case console.log works asynchronously and decrement works synchronously.
Therefore, the decrement will be executed first, the asynchronous function will wait for the synchronous function to finish, then it will be executed with i == 0
In the third case, the loop body executes synchronously, and runs the asynchronous function at each iteration. Therefore, the decrement can not work until the end of the loop, so the condition in the cycle is always true. And so until the stack or memory is full
New contributor
add a comment |
Because in the first case console.log and decrement work in sync with each other because they are both inside the same asnychronous function.
In the second case console.log works asynchronously and decrement works synchronously.
Therefore, the decrement will be executed first, the asynchronous function will wait for the synchronous function to finish, then it will be executed with i == 0
In the third case, the loop body executes synchronously, and runs the asynchronous function at each iteration. Therefore, the decrement can not work until the end of the loop, so the condition in the cycle is always true. And so until the stack or memory is full
New contributor
Because in the first case console.log and decrement work in sync with each other because they are both inside the same asnychronous function.
In the second case console.log works asynchronously and decrement works synchronously.
Therefore, the decrement will be executed first, the asynchronous function will wait for the synchronous function to finish, then it will be executed with i == 0
In the third case, the loop body executes synchronously, and runs the asynchronous function at each iteration. Therefore, the decrement can not work until the end of the loop, so the condition in the cycle is always true. And so until the stack or memory is full
New contributor
edited yesterday
New contributor
answered yesterday
Nikita UmnovNikita Umnov
1544
1544
New contributor
New contributor
add a comment |
add a comment |
In your particular example it decrements the i
and then runs the async
code like:
let i = 3;
while (i) {
i--; // <---------------------
(async () => { // |
await Promise.resolve();// |
console.log(i); // |
})(); // |
// >---------------------------
}
Regarding your third snippet, it will never decrease the i
value and so loop runs forever and thus crashes application:
let i = 3;
while (i) {
(async () => {
await Promise.resolve(); // await and resolve >-----------
// the following code doesn't run after it resolves // |
console.log(i); // |
i--; // |
})(); // |
// out from the (async() => {})() <-------------------------
}
Not really, If you would remove theawait Promise.resolve
it would log correctly.
– Jonas Wilms
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have anasync
function without anawait
in its body that it will be blocking and run synchronously like any other function?
– Ahmed Karaman
yesterday
2
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but thei
would be equal to zero eventually.
– meze
yesterday
1
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.
– Joel Cornett
yesterday
|
show 4 more comments
In your particular example it decrements the i
and then runs the async
code like:
let i = 3;
while (i) {
i--; // <---------------------
(async () => { // |
await Promise.resolve();// |
console.log(i); // |
})(); // |
// >---------------------------
}
Regarding your third snippet, it will never decrease the i
value and so loop runs forever and thus crashes application:
let i = 3;
while (i) {
(async () => {
await Promise.resolve(); // await and resolve >-----------
// the following code doesn't run after it resolves // |
console.log(i); // |
i--; // |
})(); // |
// out from the (async() => {})() <-------------------------
}
Not really, If you would remove theawait Promise.resolve
it would log correctly.
– Jonas Wilms
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have anasync
function without anawait
in its body that it will be blocking and run synchronously like any other function?
– Ahmed Karaman
yesterday
2
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but thei
would be equal to zero eventually.
– meze
yesterday
1
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.
– Joel Cornett
yesterday
|
show 4 more comments
In your particular example it decrements the i
and then runs the async
code like:
let i = 3;
while (i) {
i--; // <---------------------
(async () => { // |
await Promise.resolve();// |
console.log(i); // |
})(); // |
// >---------------------------
}
Regarding your third snippet, it will never decrease the i
value and so loop runs forever and thus crashes application:
let i = 3;
while (i) {
(async () => {
await Promise.resolve(); // await and resolve >-----------
// the following code doesn't run after it resolves // |
console.log(i); // |
i--; // |
})(); // |
// out from the (async() => {})() <-------------------------
}
In your particular example it decrements the i
and then runs the async
code like:
let i = 3;
while (i) {
i--; // <---------------------
(async () => { // |
await Promise.resolve();// |
console.log(i); // |
})(); // |
// >---------------------------
}
Regarding your third snippet, it will never decrease the i
value and so loop runs forever and thus crashes application:
let i = 3;
while (i) {
(async () => {
await Promise.resolve(); // await and resolve >-----------
// the following code doesn't run after it resolves // |
console.log(i); // |
i--; // |
})(); // |
// out from the (async() => {})() <-------------------------
}
edited yesterday
answered yesterday
Bhojendra RauniyarBhojendra Rauniyar
53.1k2081135
53.1k2081135
Not really, If you would remove theawait Promise.resolve
it would log correctly.
– Jonas Wilms
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have anasync
function without anawait
in its body that it will be blocking and run synchronously like any other function?
– Ahmed Karaman
yesterday
2
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but thei
would be equal to zero eventually.
– meze
yesterday
1
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.
– Joel Cornett
yesterday
|
show 4 more comments
Not really, If you would remove theawait Promise.resolve
it would log correctly.
– Jonas Wilms
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have anasync
function without anawait
in its body that it will be blocking and run synchronously like any other function?
– Ahmed Karaman
yesterday
2
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but thei
would be equal to zero eventually.
– meze
yesterday
1
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.
– Joel Cornett
yesterday
Not really, If you would remove the
await Promise.resolve
it would log correctly.– Jonas Wilms
yesterday
Not really, If you would remove the
await Promise.resolve
it would log correctly.– Jonas Wilms
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@Bhojendra Rauniyar Can you please check this third snippet?
– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have an
async
function without an await
in its body that it will be blocking and run synchronously like any other function?– Ahmed Karaman
yesterday
@JonasWilms Does what you say mean that if we have an
async
function without an await
in its body that it will be blocking and run synchronously like any other function?– Ahmed Karaman
yesterday
2
2
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but the i
would be equal to zero eventually.– meze
yesterday
the asynchronous code runs in background
this is incorrect. The async code is deferred, and since event loop is busy with infinite while loop the async code never runs. if it was in background, the output numbers would be random but the i
would be equal to zero eventually.– meze
yesterday
1
1
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.
await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.– Joel Cornett
yesterday
@BhojendraRauniyar JavaScript is single-threaded, so there is no “background”. Only one chunk of code can run at one time. I’m fuzzing over some of the details here, but there is a single event loop that dequeues a pending callback and runs it to completion. In order to prevent blocking (such as waiting for a timer or a network request), code is broken up into smaller callbacks in order to give competing events their chance to run in the single thread.
await
is just syntactic sugar for “schedule a callback to run after the thing we’re waiting on is available”.– Joel Cornett
yesterday
|
show 4 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55323666%2fwhy-does-async-await-work-properly-when-the-loop-is-inside-the-async-function-an%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
9
Do you know how
async function
s desugar to promises?– Bergi
yesterday
@Bergi It's just a syntactic sugar for dealing with promises instead of using the
.then()
and.catch()
methods. Am I right ?– Ahmed Karaman
12 hours ago
Yes, basically. So what do you think would your code look like if written with
then()
?– Bergi
12 hours ago
For the second snippet, it would be:
while (i) { Promise.resolve().then(res => console.log(i)); i--; }
– Ahmed Karaman
11 hours ago
Exactly. And it seems obvious now why this logs
0
three times.– Bergi
10 hours ago