Event Loop

Code


function mul(a, b) {
	return a * b;
}

function square(a) {
	return mul(a, a);
}

function printSquare() {
	console.log(square(42));
}

printSquare();

Callstack

  • push printSquare
  • push square
  • push mul
  • pop  mul
  • pop  square
  • pop  printSquare

Blocking JS

example

Solution? Asynchronous callbacks

callback queue

Code


function asyncJob() {
  setTimeout(fucntion job() {
    console.log("I'm done");
  }, 5000);
}

asyncJob();
  • push asyncJob
  • push setTimeout
  • push job to callback queue
  • pop  setTimeout
  • pop  asyncJob
  • now WebAPI waits 5000ms
  • push job
  • pop  job

Event Loop

calls functions from callback queue when stack is empty


setInterval(function () {
    // some code which takes 30ms to execute
}, 16);
Examples 
alert('hello,');

setTimeout(function () {
   alert('!')
}, 0);

alert('world');
var start = Date.now();
var c;

console.log("start = " + new Date());

setTimeout(function () {
    console.log("timeout = " + new Date());
}, 1000);

while (start + 2000 > Date.now()) {
    var c = 3 + 3 + 3;
}

console.log("end = " + new Date());

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { console.log('i =', i) }, 100);
}
for (var i = 1; i <= 2; i++) {
    (function () {
        var local = i;
        setTimeout(function() { console.log('i =', local) }, 100);
    })();
}
var a = {
    firstName: 'Mike',
    sayName: function () {
        setTimeout(function () {
            console.log(this.firstName);
        }, 1000);
    }
}

a.sayName();
var a = {
    firstName: 'Mike',
    sayName: function () {
        setTimeout(function () {
            console.log(this.firstName);
        }.bind(this), 1000);
    }
}
a.sayName();

Questions?