JavaScript Event Loop
Download as PPTX, PDF5 likes2,895 views
The document explains the JavaScript event loop, detailing its structure as a single-threaded, non-blocking, asynchronous language that involves a call stack, event loop, and callback queue. It provides examples of synchronous and asynchronous functions, demonstrating how the event loop allows for concurrent operations despite being single-threaded. Additionally, it highlights the importance of avoiding blocking code to maintain performance in web applications.
JavaScript Event Loop
- 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
- 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.
- 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 !
- 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
- 70. Beside setTimeout, the other web APIs are (for examples): - DOM manipulation - XHR (XMLHttpRequest) - Etc…
- 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
- 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 !
- 85. THE END