45 likes
·
13.8K reads
14 comments
Thank you very much. Very detailed and mind blowing explanation. Understood. )
Thank you! Glad it was helpful 😍
Can you please explain this me why the event loop prioritize cartoon's setTimeouts than the then's setTimeout? Ok, I did some changes here
const tom = () => console.log('Tom');
const jerry = () => console.log('Jerry');
const doggy = () => console.log('Doggy');
const cartoon = () => {
console.log('Cartoon');
setTimeout(tom, 0);
setTimeout(doggy, 0);
new Promise((resolve, reject) =>{
resolve('I am a Promise, right after tom and doggy! Really?');
setTimeout(()=>{console.log('inner timeout')},0)
}
).then(resolve => console.log(resolve));
new Promise((resolve, reject) =>
resolve('I am a Promise after Promise!')
).then(resolve => console.log(resolve));
jerry();
}
cartoon();
"Cartoon"
"Jerry"
"I am a Promise, right after tom and doggy! Really?"
"I am a Promise after Promise!"
"Tom"
"Doggy"
"inner timeout"
I think it doesn't matter if the setTimeout is inside then, because it will still get added to the TASK queue and since all the timers are 0, they will get executed in order they got en-queued.
tom -> doggy -> inner timeout
Jalaj Gupta , That's absoloutely correct.
Thanks for great Article.
Cartoon
Jerry
//These micro task has precedence over macro tasks
I am a Promise, right after tom and doggy! Really?
I am a Promise after Promise!
//Finally macro tasks
Doggy
Tom
- First the function cartoon gets into the Stack.
- Next in call stack, Console.log('Cartoon') gets executed
- Next in call stack, setTimeOut -> tom is web api, so tom goes to TaskQueue but has not been executed yet.
- Next in call stack, setTimeOut -> doggy is web api, so doggy goes to TaskQueue but has not been executed yet.
- Next promise in call stack, the then() callback goes to job queue but has not been executed yet.
- Next another promise in call stack, the then() callback goes to job queue but has not been executed yet.
- Next in call stack, is jerry().
- Next in call stack, console.log('Jerry').
- At this point, nothing in Call Stack. The event loop looks into both the Queues. Gives priority to Job Queue over Tasks Queue.
- Execute both the promises callbacks from Job Queue by pushing those to Call Stack one by one.
- Now both Call Stack and Job Queue are empty. The Event Loop executes both the tasks from Task Queue.
So the expected output would be:
- Cartoon
- Jerry
- I am a Promise, right after tom and doggy! Really?
- I am a Promise after Promise!
- Doggy
- Tom
You were very close. Well tried and Thanks for trying. Thumbs up for it!
oops yes your are correct
Tapas Adhikary I didn't understood the 11th point in the above explanation. setTimeout(tom, 50); setTimeout(doggy, 30); The task queue is filled this way: [tom(), doggy()] So why isn't the output this because task queue is a task so FIFO no matter the timeout duration: Cartoon Jerry I am a Promise, right after tom and doggy! Really? I am a Promise after Promise! Tom Doggy
Vedamruta Udavant No for setTimeout, setInterval kind of web APIs it will be filled based on the delayed time. That's the catch you need to keep in mind. So it will [doggy(), tom()] this way.
Tapas Adhikary Got it, thank you 😄
Nice post for beginner. Thank you!
MacroTasks are called, Tasks and MicroTasks are called Jobs.
This ruined me for about an hour until I realized the comma was in the wrong place
Thanks for reporting this. Corrected.