Task Queue and Job Queue - Deep dive into Javascript Event Loop Model

UpdatedJanuary 10, 2022

•4 min read•View as Markdown

Task Queue and Job Queue - Deep dive into Javascript Event Loop Model

Tapas Adhikary

Comments (6)

Join the discussion

Wessam Abdelnabi2y ago

it is very very useful thanks alot

Brian Coverstone4y ago

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

Tapas Adhikary4y ago

Thanks for reporting this. Corrected.

xy Zing4y ago

Nice post for beginner. Thank you!

Adrian Belen5y ago

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"

Jalaj Gupta5y ago

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

Tapas Adhikary4y ago

Jalaj Gupta , That's absoloutely correct.

Izzatullo Kanoatov5y ago

Thank you very much. Very detailed and mind blowing explanation. Understood. )

Tapas Adhikary5y ago

Thank you! Glad it was helpful 😍

Thamaraiselvam7y ago

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

Tapas Adhikary7y ago

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!

Thamaraiselvam

Thamaraiselvam7y ago

oops yes your are correct

Vedamruta Udavant3y ago

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

Tapas Adhikary3y ago

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.

Vedamruta Udavant3y ago

Tapas Adhikary Got it, thank you 😄