JavaScript Event Loop

JS EVENT LOOPSON LE

sontl@designveloper.com

HOW DOES

ACTUALLY WORK ?

JS

HEY ,JSWHAT ARE YOU ?

I’m aSINGLE-THREADED,

NON-BLOCKING,ASYNCHRONOUS,

CONCURRENTlanguage

I have a CALL STACK,

an EVENT LOOP,a CALLBACK QUEUE,

some others APIs,and stuffs…

….

!!!

GOOGLE’s V8 JAVASCRIPT RUNTIME ENGINE

do you have a CALL STACK,

an EVENT LOOP,a CALLBACK QUEUE,

some others APIs,and stuffs ???

HEY ,

I have a CALL STACK and a

HEAP…

I don’t know what other things are !

HEAP STACK

Memory Allocation

The Call Stack

main()

printSquare(n)

calcSquare(n)

multiply(n, n)

HEAP

STACK

main()

printSquare(n)

calcSquare(n)

multiply(n, n)

WEB APIs

DOM (document)

ajax (XMLHTTPRequest)

setTimeout

CALLBACK QUEUE onClick onLoad onDone

EVENT LOOP

THE CALLSTACK

One thread == One call stack == One thing at a time

main()

printSquare(n)

calcSquare(n)

multiply(n, n)

function multiply(a, b){return a * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

calcSquare(n)

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

calcSquare(n)

multiply(n, n)

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

calcSquare(n)

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

console.log()

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

printSquare(n)

main()

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

function multiply(a, b){return b * b;

}function calcSquare(n){

return multiply(n, n);}function printSquare(n){

var result = calcSquare(n);console.log(result);

}printSquare(4);

THE CALL STACK

function one(){throw new Error(“Oops!”);

}function two(){

one();}function three(){

two();}three();

THE CALL STACK

main()

three(n)

two()

one()

function stackTrace() {

var err = new Error();return err.stack;

}

HELPFUL WHEN DEBUGGING

function foo(){return foo();

}

foo();

THE CALL STACK

main()

foo()

function foo(){return foo();

}

foo();

THE CALL STACK

main()

foo()

foo()

function foo(){return foo();

}

foo();

THE CALL STACK

main()

foo()

foo()

foo()

function foo(){return foo();

}

foo();

THE CALL STACK

main()

foo()

foo()

foo()

foo()

function foo(){return foo();

}

foo();

THE CALL STACK

main()

foo()

foo()

foo()

foo()

foo()

foo()

foo()

BLOCKINGCode that are slow to run

BLOCKINGSome examples:- console.log() is not slow

- A loop from 1 to 10,000,000,000 is slow- Network request is slow- Image processing is slow

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

getSynchronous(“/a”)

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

getSynchronous(“/b”)

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

getSynchronous(“/c”)

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

console.log(a)

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

console.log(b)

var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);

// get data done, now log them out

console.log(a);console.log(b);console.log(c);

THE CALL STACK

main()

console.log(c)

WHY IS THIS A PROBLEM ?Because we runs

code in BROWSERS.See the demo.

THE SOLUTION ?Asynchronous

callbacks.

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

there

HOW DOES THIS WORK ?THE CODE THE CONSOLE

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

main()

console.log(“Hi”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

main()

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

main()

setTimeout(callback)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

main()

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

main()

console.log(“DSV”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

main()

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

callback

console.log(“there”);

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

THE CALL STACK

CONCURRENCY & EVENT LOOPOne thing at a time.Except, not really.

HEAP

STACK

main()

printSquare(n)

calcSquare(n)

multiply(n, n)

WEB APIs

DOM (document)

ajax (XMLHTTPRequest)

setTimeout

CALLBACK QUEUE onClick onLoad onDone

EVENT LOOP

One thing at a time !

But we still have this !

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

main()

console.log(“Hi”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

main()

setTimeout(callback)

timer

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

main()

setTimeout(callback)

timer

console.log(“DSV”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

main()

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

WHAT DOES DO ?

- It watches the Call Stack and the Callback Queue

- If the Stack is empty, it takes the first element in the Callback Queue, and pushes it into the Stack

EVENT LOOP

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

console.log(“there”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 5000);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

Beside setTimeout, the other web APIs are (for examples):- DOM manipulation- XHR (XMLHttpRequest)- Etc…

ANOTHER EXAMPLEs:setTimeout(callback, 0);

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

main()

console.log(“Hi”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

main()

setTimeout(callback)

timer

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

main()

setTimeout(callback)

timer

console.log(“DSV”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

main()

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

console.log(“there”)

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

callback

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

console.log(“Hi”);

setTimeout(function (){console.log(“there”);

}, 0);

console.log(“Designvelopers”);

Hi

Designvelopers

there

CALLBACK QUEUE

EVENT LOOP

CODE

CONSOLE

STACK WEB APIs

DEMOS WITH LOUPE

ANOTHER EXAMPLEs:- setTimeOut: the minimum time to

execute a function- synchronous vs asynchronous and how this effect the browser

- don’t block the event loop !

UNDERSTANDINGprocess.nextTick()

IN NODEJSlink

THE END

JS EVENT LOOP

SON LEsontl@designveloper.com

THANKS FOR WATCHING !