JavaScript Event Loop Websites: https://www.designveloper.com Visit our blog https://www.designveloper.com/blog Like Facebook page https://www.facebook.com/designveloper/ Youtube: http://bit.ly/29PTtFS

1. J
S
EVENT
LOOP
SON LE
sontl@designveloper.com

2. HOW DOES
ACTUALLY WORK
?
J
S

3. HEY
,
J
SWHAT ARE YOU ?

4. I’m a
SINGLE-THREADED,
NON-BLOCKING,
ASYNCHRONOUS,
CONCURRENT
language

5. I have a CALL
STACK,
an EVENT LOOP,
a CALLBACK
QUEUE,
some others APIs,

6. ….

7. !!

8. GOOGLE’s V8 JAVASCRIPT RUNTIME
ENGINE

9. do you have a CALL
STACK,
an EVENT LOOP,
a CALLBACK QUEUE,
some others APIs,
and stuffs ???
HEY
,

10. I have a CALL
STACK and a
HEAP
…
I don’t know
what other

11. HEAP STACK
Memory
Allocation
The Call
Stack
main()
printSquare(n)
calcSquare(n)
multiply(n, n)

12. HEA
P
STAC
K
main()
printSquare(n)
calcSquare(n)
multiply(n, n)
WEB
APIs
DOM (document)
ajax (XMLHTTPRequest)
setTimeout
CALLBACK
QUEUE
onClick onLoad onDone
EVENT
LOOP

13. THE
CALLSTACK
One thread == One call stack == One thing at a time
main()
printSquare(n)
calcSquare(n)
multiply(n, n)

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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)

20. 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)

21. 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)

22. 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)

23. 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)

24. 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()

25. 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)

26. 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

27. 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

28. function one(){
throw new Error(“Oops!”);
}
function two(){
one();
}
function three(){
two();
}
three();
THE CALL STACK
main()
three(n)
two()
one()

29. function stackTrace()
{
var err = new Error();
return err.stack;
}
HELPFUL WHEN
DEBUGGING

30. function foo(){
return foo();
}
foo();
THE CALL STACK
main()
foo()

31. function foo(){
return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()

32. function foo(){
return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
foo()

33. function foo(){
return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
foo()
foo()

34. function foo(){
return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
foo()
foo()
foo()
foo()
foo()

35. BLOCKING
Code that are slow to run

36. BLOCKIN
GSome 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

37. 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()

38. 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”)

39. 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”)

40. 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”)

41. 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)

42. 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)

43. 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)

44. WHY IS THIS
A PROBLEM ?
Because we runs code in
BROWSERS.
See the demo.

45. THE SOLUTION
?Asynchronous callbacks.

46. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
HOW DOES THIS WORK ?
THE CODE THE
CONSOLE

47. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK

48. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“Hi”)

49. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()

50. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
setTimeout(callback)

51. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()

52. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“DSV”)

53. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()

54. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK

55. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
callback
console.log(“there”);

56. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK

57. CONCURRENCY &
EVENT LOOP
One thing at a time.
Except, not really.

58. HEA
P
STAC
K
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 !

59. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs

60. 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”)

61. 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

62. 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”)

63. 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()

64. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs
callback

65. 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
EVEN
T
LOOP

66. 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”)

67. 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

68. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs

69. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs

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

71. ANOTHER
EXAMPLEs:setTimeout(callback, 0);

72. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 0);
console.log(“Designvelopers”);
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs

73. 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”)

74. 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

75. 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”)

76. 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()

77. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs
callback

78. 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”)

79. 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

80. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs

81. console.log(“Hi”);
setTimeout(function (){
console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK
QUEUE
EVENT
LOOP
CODE
CONSOLE
STACK WEB APIs

82. DEMOS WITH
LOUPE

83. 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 !

84. UNDERSTANDING
process.nextTick()
IN NODEJS
link

85. THE
END

86. J
S
EVENT
LOOP
SON LE
sontl@designveloper.com
THANKS FOR
WATCHING !