Home Explore Help
Sign In
Vitalii_Polishchuk
/
HomeWork
Watch 1
Star 0
Fork 0
Files Issues 6 Pull Requests 0 Wiki
Browse Source

HW<14> done

Vitalii Polishchuk 3 years ago
parent
23f8c3fa6c
commit
ed9c9270c9
3 changed files with 167 additions and 0 deletions
Unified View Show Diff Stats
  1. 44 0
      js/14-js-async-await/css/main.css
  2. 20 0
      js/14-js-async-await/index.html
  3. 103 0
      js/14-js-async-await/js/main.js

+ 44 - 0
js/14-js-async-await/css/main.css
View File 

@@ -0,0 +1,44 @@
 
+#light,
 
+#pedestrianLight {
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+    width: 100px;
 
+    height: 200px;
 
+    margin: 20px;
 
+    box-shadow: 0 0 0 1px #000;
 
+}
 
+
 
+#light div,
 
+#pedestrianLight div {
 
+    width: 50px;
 
+    height: 50px;
 
+    box-shadow: 0 0 0 1px #000;
 
+    border-radius: 40px;
 
+}
 
+
 
+#btn {
 
+    width: 40px;
 
+    height: 40px;
 
+    border: 3px solid #000;
 
+    border-radius: 45%;
 
+    margin: 20px;
 
+    background-color: #7dfd5d;
 
+    transition: all 0.3s ease;
 
+}
 
+
 
+#btn:hover {
 
+    background-color: #4efa23;
 
+    transform: scale(1.05);
 
+}
 
+
 
+#btn:active {
 
+    transform: scale(0.95);
 
+}
 
+
 
+#btn:disabled {
 
+    transform: scale(1);
 
+    background-color: #999;
 
+    border-color: #7c7c7c;
 
+}

+ 20 - 0
js/14-js-async-await/index.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>javascript-async-await</title>
 
+    <link rel="stylesheet" href="css/main.css">
 
+</head>
 
+
 
+<body>
 
+    <div id="light"></div>
 
+    <div id="pedestrianLight"></div>
 
+    <button id="btn">Тыц</button>
 
+
 
+    <script src="js/main.js"></script>
 
+</body>
 
+
 
+</html>

+ 103 - 0
js/14-js-async-await/js/main.js
View File 

@@ -0,0 +1,103 @@
 
+//Светофор
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
+
 
+async function trafficLight(parent, greenDelay, yellowDelay, redDelay) {
 
+    while (true) {
 
+        colorChange(parent, "green", 2)
 
+        await delay(greenDelay)
 
+        colorChange(parent, "yellow", 1)
 
+        await delay(yellowDelay)
 
+        colorChange(parent, "red", 0)
 
+        await delay(redDelay)
 
+        colorChange(parent, "yellow", 1)
 
+        await delay(yellowDelay)
 
+    }
 
+}
 
+
 
+let colorChange = (parent, color, indexElem) => {
 
+    for (let i = 0; i < parent.children.length; i++) {
 
+        indexElem === i ? parent.children[indexElem].style.background = color : parent.children[i].style.background = "";
 
+    }
 
+}
 
+
 
+let elemCreator = (parent, element, amount) => {
 
+    for (let i = 0; i < amount; i++) {
 
+        let e = document.createElement(element);
 
+        parent.append(e)
 
+    }
 
+}
 
+
 
+elemCreator(light, "div", 3)
 
+
 
+trafficLight(light, 6000, 2500, 6000)
 
+
 
+//domEventPromise
 
+function domEventPromise(element, eventName) {
 
+    return new Promise((resolve, reject) => {
 
+        let f = (event) => {
 
+            element.removeEventListener(eventName, f)
 
+            resolve(event)
 
+        }
 
+        element.addEventListener(eventName, f)
 
+    })
 
+}
 
+
 
+//PedestrianTrafficLight
 
+async function PedestrianTrafficLight(parent, greenDelay, redDelay, redDelay2 = 1200) {
 
+    while (true) {
 
+        colorChange(parent, "green", 1)
 
+        await delay(greenDelay)
 
+        colorChange(parent, "red", 0)
 
+        await Promise.race([delay(redDelay), domEventPromise(btn, 'click')]).then(async function () { await delay(redDelay2) }) //поставил задержку чтоб было не мгновенное переключение, а убыстренее)
 
+    }
 
+}
 
+
 
+elemCreator(pedestrianLight, "div", 2);
 
+
 
+PedestrianTrafficLight(pedestrianLight, 6000, 6000)
 
+btn.addEventListener("click", changeButtonState)
 
+
 
+async function changeButtonState() {
 
+    btn.disabled = true;
 
+    await delay(10000)
 
+    btn.disabled = false;
 
+}
 
+
 
+//speedtest
 
+async function speedtest(getPromise, count, parallel = 1) {
 
+
 
+    let t0 = performance.now();
 
+    for (let i = 0; i < count; i++) {
 
+        let promises = [];
 
+
 
+        for (let j = 0; j < parallel; j++) {
 
+            let res = getPromise();
 
+            promises.push(res);
 
+        }
 
+        await Promise.all(promises)
 
+    }
 
+    let t1 = performance.now();
 
+
 
+    let duration = t1 - t0;
 
+    let querySpeed = count / duration;
 
+    let queryDuration = duration / count;
 
+    let parallelSpeed = (count * parallel) / duration;
 
+    let parallelDuration = duration / (count * parallel);
 
+
 
+    return {
 
+        duration,
 
+        querySpeed, //средняя скорость одного запроса
 
+        queryDuration, //
 
+        parallelSpeed,
 
+        parallelDuration
 
+    }
 
+}
 
+
 
+
 
+speedtest(() => delay(1000), 10, 10).then(result => console.log(result))
 
+// {duration: 10000, 
+// querySpeed: 0.001, //1 тысячная запроса за миллисекунду
 
+// queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем 
+// parallelSpeed: 0.01  // 100 запросов за 10000 миллисекунд
 
+// parallelDuration: 100 // 100 запросов за 10000 миллисекунд
 
+speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5)