Comments (8)
@AndriyYakymiv I think the best way to think of it is like this, and perhaps loupe should actually show this:
instead of this
function f() {
console.log("foo");
setTimeout(g, 0);
console.log("foo again");
}
function g() {
console.log("bar");
}
function b() {
console.log("bye");
}
f();
/*<---- Why the stack is not empty here, after f() function removing from stack? */
b();
think about it like this:
function main() {
function f() {
console.log("foo");
setTimeout(g, 0);
console.log("foo again");
}
function g() {
console.log("bar");
}
function b() {
console.log("bye");
}
f();
b();
}
main()
so think of your whole script as if it was wrapped in a big function. Then you would have a main()
item at the bottom of the stack all the way through f()
and b()
, and it would only clear after b()
was done.
from loupe.
The JS runtime still executing the main function so it simply moves on next statement. If you put a break point in Chrome dev tool, you can see the call stack and the anonymous function which is the entry point for the execution.
from loupe.
Thank you in advance if somebody will help me to understand 😃
from loupe.
why the g() function in setTimeout runs only after b() function
- after
console.log("foo");
JS executesetTimeout
and from now on g() is handled by the timer. After 0 second, g() is put into the callback queue waiting until the stack is empty to be executed - JS execute
console.log("foo again");
- JS execute
b()
thenconsole.log("bye")
- Call stack is empty now. Browser put g() into the call stack and JS execute it.
- JS execute
console.log("bar");
from loupe.
@phamvuau
But why call stack is not empty after finish of f()
function?
In demo it's empty: Check latenflip
Does the engine add all of the synchronous code instructions from main thread(or main function which wraps the code) to some "virtual queue" which passes this all instructions step by step to call stack and after only running all such instructions from this "queue" event loop will pass functions from callback queue to call stack?
from loupe.
@AndriyYakymiv it's empty in my side. I'm using Chrome latest.
Does the engine add all of the synchronous code instructions from main thread(or main function which wraps the code) to some "virtual queue" which passes this all instructions step by step to call stack and after only running all such instructions from this "queue" event loop will pass functions from callback queue to call stack?
There is a message queue
or we can call it callback queue
. You can find more detail on MDN
from loupe.
@phamvuau
In this demo it's also empty and I know that this is correct behavior. But according to MDN's article: When the stack is empty, a message is taken out of the queue and processed. This queue - is a callback queue
, I know it. But then why after finishing the f()
function result of SetTimeout()
is not added to call stack from callback queue
but instead the g()
function is added? You are also saying that the call stack
after f()
is empty
from loupe.
@phamvuau @latentflip
I understood, every script creates an anonymous wrapped function which is inside the call stack and all callback functions added to call stack from callback queue only after this "main"(anonymous) function will execute all instructions. If I understand it correctly, you can close this issue 😃. Thank you, guys!
from loupe.
Related Issues (20)
- gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
- Code Edit Bug HOT 2
- Support for async / await and promises HOT 5
- Promises are not supported HOT 5
- DOM manipulation
- Clear Timeout is not Working as Expected Registered timeout executes even after HOT 2
- Not working with certain functions HOT 3
- Instructions going into call stack.
- Macrotask and microtask support?
- Stack not clear yet Event loop kicks in HOT 1
- Please provide "Fragment to fragment" exmple
- promise
- Add A Readme HOT 2
- License
- Don't work with IIFE
- can't edit the code to run HOT 2
- Code Edit issue HOT 9
- Cannot edit code, runs only template HOT 4
- different results for setTimeout HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from loupe.