coreJs/eventLoop.js at master · adityasuman2025/coreJs · GitHub

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
/*------------------ prblm ------------------------*/
// callbacks exists in callback Queue(macrotask queue) and wait for event loop to pick it and then add it in call stack (once the call stack is empty)
// setTimeout(() => {
//     console.log("a");
// }, 0);

// console.log("b");
// console.log("c");


// so to print a b c we need to put this setTimeout in promise
// and do other stuffs after the promise is resolved/done
// const printA = new Promise(function(resolve, reject) {
//     setTimeout(() => {
//         console.log("a");
//         resolve();
//     }, 0);
// });

//// way - 1
// printA.then(resp => {
//     console.log("b");
//     console.log("c");
// });

//// way - 2
// (async function() {
//     await printA;
//     console.log("b");
//     console.log("c");
// })();


/*------------------ prblm ------------------------*/
// // promise callback and mutation observar is moved to microTask Queue
// // All Callback functions (except promise callback and mutation observer) are transferred to callback queue or task queue or macroTask queue

// // Microtask queue tasks are given priority over callback/macrostask queue tasks -> event loop will pick tasks from callback queue, only when all tasks of microtask queue is done
// console.log(1)

// const mc = new MessageChannel()

// mc.port1.onmessage = () => {
//     console.log(2)
// }

// Promise.resolve().then(() => {
//     console.log(3)
// })

// setTimeout(() => {
//     console.log(4)
// }, 0)

// console.log(5)

// mc.port2.postMessage('')

// console.log(6)


/*------------------ prblm ------------------------*/
// console.log(1)

// document.body.addEventListener('click', () => {
//     console.log(2)
// })

// Promise.resolve().then(() => {
//     console.log(3)
// })

// setTimeout(() => {
//     console.log(4)
// }, 0)

// console.log(5)

// document.body.click() // document.body.click() is synchronous

// console.log(6)

// // Synchronous code (including event listeners) gets executed first in order.


/*------------------ prblm ------------------------*/
console.log(1)

window.onmessage = () => {
    console.log(2)
}

Promise.resolve().then(() => {
    console.log(3)
})

setTimeout(() => {
    console.log(4)
}, 0)

console.log(5)

window.postMessage('')

console.log(6)