forked from priya42bagde/JavaScript-with-JC
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCallStack-EventLoop-TaskQueue.js
More file actions
159 lines (130 loc) · 4.06 KB
/
Copy pathCallStack-EventLoop-TaskQueue.js
File metadata and controls
159 lines (130 loc) · 4.06 KB
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/* 💡"JavaScript-with-JC"
👉 Event Loop, CallStack, Callback and Microtask Queue
💡 CallStack :- The callStack is used by JavaScript to keep track of multiple function calls.
CallStack maintains the order of execution of Execution Context.
💡 Callback Queue and Microtask Queue :- All the Asynchronous operations ( callback Functions )
are stored either in Callback Queue ( also known as TaskQueue or MacroTask Queue )
or MicroTask Queue ( Higher Priority ).
💡 Callback functions that store into MicroTask Queue ( Higher Priority )
1) Promises ( fetch api )
2) Browser Observers
2.a) Mutation Observer
2.b) Intersection Observer
2.c) Performance Observer
2.d) Resize Observer
3) queueMicrotask api
💡 Callback functions that store into Callback Queue ( Task Queue )
1) DOM Events ( keyboard, mouse events )
2) Drag and Drop Events
3) Timers ( SetTimeout and SetInerval )
💡 Event Loop :- Event Loop continuously monitors the callstack, callback queue and microtask queue.
and if callstack is empty and there are any tasks in callback or microtask queues,
Event loop pushes the first task into the callstack to execute.
*/
// 💡 1) Let's take an example of Callback Queue ( Task Queue )
console.log("start");
// While execution, At this line callBackFunc will be registered to web api and
// after timeout ( one second ) callBackFunc will be stored into callback queue ( task queue ).
// event loop continuously monitors the callstack and if callstack is empty
// callBackFunc will be pushed into callstack and start executing.
setTimeout(function callBackfunc() {
console.log("Hi, I am asynchronous task");
}, 1000);
console.log("end");
/* 👇 output
start
end
after 1 sec
Hi, I am asynchronous task
*/
// 💡 2) Let's take an example of Callback Queue ( Task Queue ) + MicroTask Queue ( Higher Priority )
console.log("start");
// cbFunc will be quickly stored into callback queue ( task queue ).
setTimeout(function cbFunc() {
console.log("setTimeout completed");
});
const p1 = new Promise((resolve, reject) => {
resolve("promise resolved");
});
// cbFuncMicro will be quickly stored into microTask ( higher priority ) queue.
p1.then(function cbFuncMicro(result) {
console.log(result);
});
console.log("end");
/* 👇 output
start
end
promise resolved
setTimeout completed
*/
// 💡 3) Let's take an example of queueMicroTask API ( MicroTask Queue ) + setTimeout ( Task Queue )
console.log("start");
setTimeout(function cbMacro() {
console.log("Hi, I am asynchronous task with lower priority");
});
queueMicrotask(function cbMicro() {
console.log("Hi, I am asynchronous task with higher priority");
});
console.log("end");
/* 👇 output
start
end
Hi, I am asynchronous task with higher priority
Hi, I am asynchronous task with lower priority
*/
// 💡 4) Starvation of Callback Queue ( Task Queue )
// When Microtask queue has lots of task inqueue,
// then Callback Queue ( Task Queue ) has to wait for long time, this case is known as starvation.
console.log("start");
// cbFunc has to wait for all Promise callback functions to execute.
setTimeout(function cbFunc() {
console.log("setTimeout completed");
});
// Promise callback functions has more priority ( MicroTask Queue )
Promise.resolve()
.then(() => {
console.log("promise 1 completed");
})
.then(() => {
console.log("promise 2 completed");
})
.then(() => {
console.log("promise 3 completed");
})
.then(() => {
console.log("promise 4 completed");
})
.then(() => {
console.log("promise 5 completed");
})
.then(() => {
console.log("promise 6 completed");
})
.then(() => {
console.log("promise 7 completed");
})
.then(() => {
console.log("promise 8 completed");
})
.then(() => {
console.log("promise 9 completed");
})
.then(() => {
console.log("promise 10 completed");
});
console.log("end");
/* 👇 output
start
end
promise 1 completed
promise 2 completed
promise 3 completed
promise 4 completed
promise 5 completed
promise 6 completed
promise 7 completed
promise 8 completed
promise 9 completed
promise 10 completed
setTimeout completed
*/