-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
82 lines (67 loc) · 2.24 KB
/
script.js
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
// status flag to yield a running generator
let status = false;
// Start generators
document.getElementById("start").addEventListener("click", function () {
this.style.display = "none";
startGenerators();
});
// Yield a generator
document.getElementById("yield").addEventListener("click", () => {
status = true;
});
// Update the counter
function updateElementWithCount(element, value) {
element.textContent = value;
element.value = value;
}
function markStart(parentElement) {
parentElement.classList.remove("init");
}
function markComplete(parentElement) {
parentElement.classList.remove("active");
parentElement.classList.add("complete");
}
function markActive(parentElement) {
parentElement.classList.add("active");
}
function markInactive(parentElement) {
parentElement.classList.remove("active");
}
/** Core logic starts here **/
// Generator for counter
async function* counterGenerator(counterElement, progressElement) {
const parentElement = counterElement.parentElement;
markStart(parentElement);
let count = 0;
while (count < 30) {
markActive(parentElement);
// delay by 0.4 secs
await new Promise((resolve) => setTimeout(resolve, 400));
count = count + 1;
updateElementWithCount(counterElement, count);
updateElementWithCount(progressElement, count);
if (status) {
markInactive(parentElement);
yield;
}
}
markComplete(parentElement);
}
// Iterator queue to execute in sequence
const iteratorQueue = [
counterGenerator(document.getElementById("counter1"), document.getElementById("progress1")),
counterGenerator(document.getElementById("counter2"), document.getElementById("progress2")),
counterGenerator(document.getElementById("counter3"), document.getElementById("progress3")),
counterGenerator(document.getElementById("counter4"), document.getElementById("progress4")),
];
// iterator will be executed and on yield will be moved to end of the queue
async function startGenerators() {
while (iteratorQueue.length !== 0) {
const iterator = iteratorQueue.shift();
const value = await iterator.next();
if (!value.done) {
iteratorQueue.push(iterator);
}
status = false;
}
}