JAVASCRIPT

VANILLA  #5

Event Loop

code execution cycle

Call Stack

push function calls
pop on return

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

init();

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

init();

new Model(1);

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

init();

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

init();

new Model(2);

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

init();

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

main(); // global

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  this.nr = nr;
}

init();

Call Stack

...

Recursion

function init() {
  init();
}

init();

Call Stack

main(); // global

function init() {
  init();
}

init();

Call Stack

main(); // global

init();

function init() {
  init();
}

init();

Call Stack

main(); // global

init();

init();

function init() {
  init();
}

init();

Call Stack

main(); // global

init();

init();

init();

function init() {
  init();
}

init();

Call Stack

main(); // global

init();

init();

init();
.
.
.
.
.
init();

stack overflow

IE 9/10 ~ 20.000
Chrome  ~ 25.000

Exceptions

function init() {
  var o1 = new Model(1);
  var o2 = new Model(2);
}

function Model(nr) {
  if ( nr > 1 ) {
    throw new Error();
  }
  this.nr = nr;
}

init();

Call Stack

main(); // global

init();

new Model(2);

Uncaught Error();

Async calls

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

main(); // global

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

main(); // global

init();

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

main(); // global

init();

setTimeout();

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

main(); // global

init();

log("init");

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

main(); // global

init();

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

main(); // global

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

cb();

function init() {
  setTimeout(cb, 1000);
  log("init");

}

function cb() {
  log("callback");
}

init();

Call Stack

cb();

log("callback");

ES specs

about setTimeout:

""

BOM

window.setTimeout();

Call Stack

APIs

BOM

DOM

XHR

setTimeout();

onclick();

$.get();

Message Queue

cbTimeout();

cbGet();

0 > 0

UI block

while the stack executes

Run to Completion

each function executes its entire body
before it returns

Thank You