SlideShare a Scribd company logo

JavaScript Event Loop

•Download as PPTX, PDF•
•
Designveloper
Designveloper

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

Related slideshows

ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
 
Callback Function
Callback FunctionCallback Function
Callback Function
 
Closures in Javascript
Closures in JavascriptClosures in Javascript
Closures in Javascript
 
1 of 86
J S EVENT LOOP SON LE sontl@designveloper.com
HOW DOES ACTUALLY WORK ? J S
HEY , J SWHAT ARE YOU ?
I’m a SINGLE-THREADED, NON-BLOCKING, ASYNCHRONOUS, CONCURRENT language
I have a CALL STACK, an EVENT LOOP, a CALLBACK QUEUE, some others APIs,
….
!!
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
HEAP STACK Memory Allocation The Call Stack main() printSquare(n) calcSquare(n) multiply(n, n)
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
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()
BLOCKING Code that are slow to run
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
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 LOOP One thing at a time. Except, not really.
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 !
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 EVEN T 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 !
UNDERSTANDING process.nextTick() IN NODEJS link
THE END
J S EVENT LOOP SON LE sontl@designveloper.com THANKS FOR WATCHING !

More Related Content

JavaScript Event Loop