-
Notifications
You must be signed in to change notification settings - Fork 3
/
61 Event Loop.html
70 lines (63 loc) · 3.52 KB
/
61 Event Loop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">Click</button>
<script>
//visit: https://www.youtube.com/watch?v=8zKuNo4ay8E
/*
->call-stack: its inside js engine, it executes js code , it does one thing at a time
->the main job of this call-stack is to execute whatever comes inside it, thats all it does
->anything comes inside it, this call-stack quickly executes it,
->this callstack doesn't have a timer
->before callback function is pushes to call-stack but it cannot directly go to the
call-stack it can go to the call-stack through call-back queue
->A callback queue is a queue of tasks that are executed after the current task.
->event loop: JavaScript has a runtime model based on an event loop, which is responsible for
executing the code, collecting and processing events, and executing queued sub-tasks.
->job of the Event loop is to check this callback queue and puts the functions which is
inside callback queue into the callstack, so it acts as an gatekeeper it checks
callback queue and if there is something it pushs it to the callstack
->event loop has only one job to contineously monitor this callback queue and callstack
when it sees callstack is empty it check callback queue and sees a callback function there it quickly
puts it to callstack and callstack quickly executes it
example:
*/
console.log("start");
document.getElementById("btn").addEventListener("click",function cb(){
console.log("callback clicked")
});
console.log("end");
//o/p: start,end,callback(when button is clicked)
/*
->here when code is run GEC is created and the process goes on (studied before) then start is printed
and then cb() callback function is put to callback queue then end is printed
then when button is clicked this cb() is pushed to callstack and executed there
*/
//Why we need callback queue:
//we need callback queue because suppose user clicks the button multiple times and everytime
//the function is put inside callback queue and event loop contineuosly check it and puts these functions
//to callstack and this is where its usefull
//important
//the callback function which comes through setTimeout,setInterval,etc,DOM API's go inside callback queue
//callback queue is also know as task queue
//the callback functions which comes through promises and mutation observer go inside microtask queue
/*microtask queue-> iily to callback queue but with higher priority, functions inside microtaskqueue
are executed first and then functions inside callback queue are executed
*/
//mutation observer: The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.
//if there is some change it can execute callback functions
/*
//what is starvation of function in callback queue?
Let us take a scenario of a callback function from the microtask queue create another callback
function, and get pushed into the microtask queue. If this process goes in a loop,
then the functions in the callback queue will not get any opportunity
to execute. This is called starvation in the callback queue
*/
</script>
</body>
</html>