The event loop and the JS async dark magic
SKG Node.js December 2016
It's a data structure
It's a message loop
or a message dispatcher
Why?
Javascript uses it to achieve asynchronous programming
What is asynchronous programming?
Why do we care about it?
$.ajax({
url: "/data",
success: function (response) {
console.log(response);
},
});
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| add |
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| console.log |
| add |
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| add |
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| console.log |
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
| main |
function add() {
console.log('adding...');
return 2 + 2;
}
function print() {
var result = add();
console.log(result);
}
print();
Call stack
Code that runs async
(i.e. in a non-blocking way)
uses callback functions
However,
this doesn't mean that every callback runs async
[1, 2, 3, 4].forEach(function (number) {
var result = LARGE_NUMBER ^ 999 + number;
})
Async functions that have finished, push their callback to the event loop
The event loop runs its functions when the call stack is empty
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| console.log |
| main |
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| setTimeout() |
| main |
fn
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| console.log |
| main |
fn
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| console.log |
| main |
fn
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| main |
fn
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
fn
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| fn |
-
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| console.log |
| fn |
-
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
| fn |
-
Event loop
console.log('one');
setTimeout(function () {
console.log('two');
}, 0);
console.log('three');
for (var i = 0; i < 10000; i++) {
console.log('four');
}
Call stack
-
Event loop
setTimeout(function () {
console.log('one');
}, 2000);
setTimeout(function () {
console.log('two');
}, 2000);
setTimeout(function () {
console.log('three');
}, 2000);
setTimeout(function () {
console.log('four');
}, 2000);
Thank you for listening
What the heck is the event loop anyway?
by Philip Roberts
at JSConf EU 2014
Any questions?
Thank you for listening
Javascript async dark magic and the event loop
By sirodoht
Javascript async dark magic and the event loop
A look at how Javascript does async and the role of the event loop in this process.
- 490
