Event Loop

and the

Queue

Objectives

 

  • Define the event loop and the queue

  • Describe how the event loop and the queue work with the stack

  • Define JavaScript as a single threaded language

The Queue

An ordered list of functions waiting to be placed on the stack

Functions in the queue are processed on a first in, first out basis (FIFO)

The Event Loop

Functionality in the JavaScript runtime that checks the queue when the stack is empty

If the stack is empty, the front of the queue is placed in the stack

1 setTimeout(function() {
2   console.log("Hello World");
3 }, 0);

Queue Example

Stack:

1  function: main

Queue:

?  function: setTimeout

function()

1 setTimeout(function() {
2   console.log("Hello World");
3 }, 0);

Queue Example

Stack:

1  function: main

Queue:

?  function: setTimeout

function()

1 setTimeout(function() {
2   console.log("Hello World");
3 }, 0);

Queue Example

Stack:

2  function: function

Queue:

function()

Event Loop

1 setTimeout(function() {
2   console.log("Hello World");
3 }, 0);

Queue Example

Stack:

2  function: function

Queue:

Console:

Hello World

?  function: console.log

1 setTimeout(function() {
2   console.log("Hello World");
3 }, 0);

Queue Example

Stack:

2  function: function

Queue:

Console:

Hello World

?  function: console.log

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback is placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

4  function: main

Queue:

?  function: setTimeout

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback is placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

4  function: main

Queue:

?  function: setTimeout

function()

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback was placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

7  function: main

Queue:

2  function: square

function()

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback was placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

7  function: main

Queue:

2  function: square

function()

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback was placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

7  function: main

Queue:

?  function: console.log

function()

Console:

4

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback was placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

7  function: main

Queue:

?  function: console.log

function()

Console:

4

Event Loop

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback was placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

5  function: function

Queue:

?  function: console.log

Console:

4

Callback was placed on the queue

1 function square(n) {
2   return n * n;
3 }
4 setTimeout(function() {
5   console.log("Callback was placed",
                "on the queue");
6 }, 0);
7 console.log(square(2));

Queue Example:

Waiting for the Stack to Empty

Stack:

5  function: function

Queue:

?  function: console.log

Console:

4

Callback was placed on the queue

JavaScript is

Single Threaded

Single Threaded: Code execution is linear.  Code that is running cannot be interrupted by something else going on in the program.

Single Threaded Example

 setTimeout(function() {
   console.log("Hello from the timeout");
 }, 0);

 for (var i = 0; i < 1000000000; i++) {
   var x = i * 2;
 }
 console.log("Done with loop");

YOUR

TURN

The Event Loop And The Queue

By Elie Schoppik

The Event Loop And The Queue

  • 2,901