HW<React-MyProject> done

HW014/index.js

@@ -1,14 +1,13 @@
 const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
-async function trafficLight(dom){
-    dom = document.getElementById('color')
+async function trafficLight() {
     let red = document.getElementById('red')
     let yellow = document.getElementById('yellow')
     let green = document.getElementById('green') 
     let redTimer = document.getElementById('redTimer')
     let greenTimer = document.getElementById('greenTimer')
 
-    while (true){
+    while (true) {
         await delay(500)
             .then(() => red.style.opacity = 1)
 
@@ -35,17 +34,15 @@ async function trafficLight(dom){
         await delay(1000)
             .then(() => yellow.style.opacity = 0.3)
     }
-} 
+}
 
-async function humanTrafficLight(dom){
-    dom = document.getElementById('humanColor')
-    let red = document.getElementById('humanRed')
-    let green = document.getElementById('humanGreen') 
-    let btn = document.getElementById('btn')
-    let redTimer = document.getElementById('humanRedTimer')
+let btn = document.getElementById('btn')
+
+async function humanTrafficLightGreen() {
+    let green = document.getElementById('humanGreen')
     let greenTimer = document.getElementById('humanGreenTimer')
 
-    while (true){
+    while (true) {
         await delay(500)
             .then(() => green.style.opacity = 1)
 
@@ -53,9 +50,16 @@ async function humanTrafficLight(dom){
             .then(() => green.style.opacity = 0.3)
             .then(timer(10, greenTimer))
 
-        await delay(1500)
+        await delay(13500)
+    }
+}
 
-        await delay(500)
+async function humanTrafficLightRed() {
+    let red = document.getElementById('humanRed')
+    let redTimer = document.getElementById('humanRedTimer')
+
+    while (true) {
+        await delay(12500)
             .then(() => red.style.opacity = 1)
 
         await delay(10000)
@@ -63,12 +67,13 @@ async function humanTrafficLight(dom){
             .then(timer(10, redTimer))
 
         await delay(1500)
-
     }
-} 
+}
+
+
 
 async function timer(time, value) {
-    for (time; time> 0; time--){
+    for (time; time > 0; time--) {
         value.innerHTML = time
         await delay(1000)
         value.innerHTML = ""
@@ -76,19 +81,50 @@ async function timer(time, value) {
 }
 
 trafficLight()
+
+async function humanTrafficLight() {
+    while (true) {
+        await Promise.race([humanTrafficLightGreen(), 
+            humanTrafficLightRed(), domEventPromise(btn, 'click').then(e => {
+            console.log('event click happens', e)
+            humanTrafficLight()
+        })])
+    }
+}
+
 humanTrafficLight()
 
 function domEventPromise(click, eventName) {
-        return new Promise((resolve, reject) => {
-            click.addEventListener(eventName, (e) => {
-                resolve(e)
-            })
-            click.removeEventListener(eventName, (e) => {
-                resolve(e)
-            })
-        })
-    }
-btn.onclick = () => domEventPromise(btn, 'click').then( e => console.log('event click happens', e))
+    return new Promise(function (resolve) {
+        // debugger
+        click.addEventListener(eventName, function clickListener(e) {
+            click.removeEventListener(eventName, clickListener);
+
+            resolve(e);
+        });
+    });
+}
 
+async function speedtest(getPromise, count,parallel=1){
+    let duration = performance.now();
+    let request = parallel;
+    let arr = [];
+    for (let i = 0; i < count; i++) {
+        arr[i] = getPromise();
+        parallel -= 1;
+        await Promise.all(arr);
+    }
+    duration = performance.now() - duration;
+    
+    return {
+        duration: duration,
+        querySpeed: count / duration,
+        queryDuration: duration / count,
+        parallelSpeed: (count / duration) * request,
+        parallelDuration: duration / (request * count)
+    }
+}
 
+speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
 
+speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5).then(result => console.log(result))

HW014/index2.js

@@ -1,126 +0,0 @@
-const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
-
-let dom1 = document.getElementById('color')
-let dom2 = document.getElementById('humanColor')
-
-let switchTraffic = true
-
-async function trafficLight(dom) {
-
-    let red = document.getElementById('red')
-    let yellow = document.getElementById('yellow')
-    let green = document.getElementById('green')
-    let redTimer = document.getElementById('redTimer')
-    let greenTimer = document.getElementById('greenTimer')
-
-    while (true) {
-        await delay(500)
-            .then(() => red.style.opacity = 1)
-
-        await delay(10000)
-            .then(() => red.style.opacity = 0.3)
-            .then(timer(10, redTimer))
-
-        await delay(500)
-            .then(() => yellow.style.opacity = 1)
-
-        await delay(1000)
-            .then(() => yellow.style.opacity = 0.3)
-
-        await delay(500)
-            .then(() => green.style.opacity = 1)
-
-        await delay(10000)
-            .then(() => green.style.opacity = 0.3)
-            .then(timer(10, greenTimer))
-
-        await delay(500)
-            .then(() => yellow.style.opacity = 1)
-
-        await delay(1000)
-            .then(() => yellow.style.opacity = 0.3)
-    }
-}
-
-let btn = document.getElementById('btn')
-
-async function humanTrafficLight(dom) {
-    //добавил обертку в html, указал параметр ради задания
-
-    let red = document.getElementById('humanRed')
-    let green = document.getElementById('humanGreen')
-
-    let redTimer = document.getElementById('humanRedTimer')
-    let greenTimer = document.getElementById('humanGreenTimer')
-
-    if (switchTraffic) {
-        while (true) {
-
-            await delay(500)
-                .then(() => green.style.opacity = 1)
-
-            await delay(10000)
-                .then(() => green.style.opacity = 0.3)
-                .then(timer(10, greenTimer))
-
-            await delay(1500)
-
-            await delay(500)
-                .then(() => red.style.opacity = 1)
-
-            await delay(10000)
-                .then(() => red.style.opacity = 0.3)
-                .then(timer(10, redTimer))
-
-            await delay(1500)
-        }
-    }
-    else {
-        while (true) {
-            await delay(500)
-                .then(() => red.style.opacity = 1)
-
-            await delay(10000)
-                .then(() => red.style.opacity = 0.3)
-                .then(timer(10, redTimer))
-
-            await delay(1500)
-
-            await delay(500)
-                .then(() => green.style.opacity = 1)
-
-            await delay(10000)
-                .then(() => green.style.opacity = 0.3)
-                .then(timer(10, greenTimer))
-
-            await delay(1500)
-        }
-    }
-
-}
-
-async function timer(time, value) {
-    for (time; time > 0; time--) {
-        value.innerHTML = time
-        await delay(1000)
-        value.innerHTML = ""
-    }
-}
-
-trafficLight(dom1)
-humanTrafficLight(dom2)
-
-function domEventPromise(click, eventName) {
-    return new Promise((resolve) => {
-        click.addEventListener(eventName, (e) => {
-            switchTraffic = !switchTraffic
-            humanTrafficLight(dom2)
-            resolve(e)
-        })
-        click.removeEventListener(eventName, (e) => {
-            resolve(e)
-        })
-    })
-}
-
-btn.onclick = () => domEventPromise(btn, 'click').then(e => console.log('event click happens', e))

myproject

@@ -0,0 +1 @@
+Subproject commit d9d14e2b2d6c7903e461d7399ab7e3a4e727b55c