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");