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

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.

  • 158
Loading comments...

More from sirodoht