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

print
main
function add() {
  console.log('adding...');
  return 2 + 2;
}

function print() {
  var result = add();
  console.log(result);
}

print();

Call stack

add
print
main
function add() {
  console.log('adding...');
  return 2 + 2;
}

function print() {
  var result = add();
  console.log(result);
}

print();

Call stack

console.log
add
print
main
function add() {
  console.log('adding...');
  return 2 + 2;
}

function print() {
  var result = add();
  console.log(result);
}

print();

Call stack

add
print
main
function add() {
  console.log('adding...');
  return 2 + 2;
}

function print() {
  var result = add();
  console.log(result);
}

print();

Call stack

print
main
function add() {
  console.log('adding...');
  return 2 + 2;
}

function print() {
  var result = add();
  console.log(result);
}

print();

Call stack

console.log
print
main
function add() {
  console.log('adding...');
  return 2 + 2;
}

function print() {
  var result = add();
  console.log(result);
}

print();

Call stack

print
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

https://www.youtube.com/watch?v=8aGhZQkoFbQ

Any questions?

Thank you for listening

Made with Slides.com