|
|
@@ -0,0 +1,296 @@
|
|
|
+<!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>Document</title>
|
|
|
+ <style>
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ padding: 50px 0 0 100px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #trafficLight {
|
|
|
+ max-width: 200px;
|
|
|
+ height: 700px;
|
|
|
+ background-color: black;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Red {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: gray;
|
|
|
+ margin: 0 0 30px 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #Yellow {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: gray;
|
|
|
+ margin: 0 0 30px 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #Green {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: gray;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ padding: 90px 0 0 95px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #pedestrianTrafficLight {
|
|
|
+ max-width: 200px;
|
|
|
+ height: 460px;
|
|
|
+ background-color: black;
|
|
|
+ margin-left: 100px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #red {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: gray;
|
|
|
+ }
|
|
|
+
|
|
|
+ #green {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: gray;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 150px;
|
|
|
+ height: 30px;
|
|
|
+ margin: 20px 0 0 420px;
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <div id="trafficLight">
|
|
|
+ <div id="Red">
|
|
|
+ <h3 id="timerRed"></h3>
|
|
|
+ </div>
|
|
|
+ <div id="Yellow">
|
|
|
+ <h3 id="timerYellow"></h3>
|
|
|
+ </div>
|
|
|
+ <div id="Green">
|
|
|
+ <h3 id="timerGreen"></h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="pedestrianTrafficLight">
|
|
|
+
|
|
|
+ <div id="red">
|
|
|
+ <h3 id="redTimer"></h3>
|
|
|
+ </div>
|
|
|
+ <div id="green">
|
|
|
+ <h3 id="greenTimer"></h3>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <button id="knopka">Сhange</button>
|
|
|
+ <script>
|
|
|
+ const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+ async function timer(time, id) {
|
|
|
+ for (time; time >= 0; time--) {
|
|
|
+ id.innerHTML = time
|
|
|
+ sec = await delay(1000)
|
|
|
+ id.innerHTML = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function domEventPromise(button, eventName) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ button.addEventListener(eventName, (e) => {
|
|
|
+ resolve(e);
|
|
|
+ });
|
|
|
+ button.removeEventListener(eventName, (e) => {
|
|
|
+ resolve(e);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ domEventPromise(knopka, 'click').then(e => console.log('event click happens', e))
|
|
|
+
|
|
|
+ async function trafficLight() {
|
|
|
+ while (true) {
|
|
|
+ if (true) {
|
|
|
+ Green.style.background = "#00FF00";
|
|
|
+ Red.style.background = "grey";
|
|
|
+ knopka.disabled = true
|
|
|
+ await delay(3000);
|
|
|
+ knopka.disabled = false
|
|
|
+ await Promise.race([
|
|
|
+ delay(5000),
|
|
|
+ domEventPromise(knopka, 'click').then((e) => console.log('event click happens', e))
|
|
|
+ ])
|
|
|
+ }
|
|
|
+
|
|
|
+ var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
|
|
|
+
|
|
|
+ var awaitGrey = await delay(1000);
|
|
|
+ var styleGrey = (document.getElementById("Yellow").style.background = "grey");
|
|
|
+
|
|
|
+ if (true) {
|
|
|
+ Red.style.background = "#FF0000";
|
|
|
+ Green.style.background = "grey";
|
|
|
+ knopka.disabled = true
|
|
|
+ await delay(3000);
|
|
|
+ knopka.disabled = false
|
|
|
+ await Promise.race([
|
|
|
+ delay(5000),
|
|
|
+
|
|
|
+ ])
|
|
|
+ }
|
|
|
+
|
|
|
+ var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
|
|
|
+
|
|
|
+ var awaitGrey = await delay(2000);
|
|
|
+ var styleGrey = (document.getElementById("Yellow").style.background = "grey");
|
|
|
+ }
|
|
|
+ // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
|
|
|
+
|
|
|
+ // var awaitGrey = await delay(2000);
|
|
|
+ // var styleGrey = (document.getElementById("Yellow").style.background = "grey");
|
|
|
+
|
|
|
+ // var styleYeGreen = (document.getElementById("Green").style.background = "#00FF00");
|
|
|
+
|
|
|
+ // var awaitGrey = await delay(6000);
|
|
|
+ // var styleGrey = (document.getElementById("Green").style.background = "grey");
|
|
|
+
|
|
|
+ // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
|
|
|
+
|
|
|
+ // var awaitGrey = await delay(2000);
|
|
|
+ // var styleGrey = (document.getElementById("Yellow").style.background = "grey");
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ // }
|
|
|
+ trafficLight()
|
|
|
+
|
|
|
+
|
|
|
+ // async function trafficLight() {
|
|
|
+ // while (true) {
|
|
|
+ // var styleRed = (document.getElementById("Red").style.background = "#FF0000");
|
|
|
+ // timer(5, timerRed)
|
|
|
+ // var awaitGrey = await delay(6000);
|
|
|
+ // var styleGrey = (document.getElementById("Red").style.background = "grey");
|
|
|
+
|
|
|
+ // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
|
|
|
+ // timer(1, timerYellow)
|
|
|
+ // var awaitGrey = await delay(2000);
|
|
|
+ // var styleGrey = (document.getElementById("Yellow").style.background = "grey");
|
|
|
+
|
|
|
+ // var styleYeGreen = (document.getElementById("Green").style.background = "#00FF00");
|
|
|
+ // timer(5, timerGreen)
|
|
|
+ // var awaitGrey = await delay(6000);
|
|
|
+ // var styleGrey = (document.getElementById("Green").style.background = "grey");
|
|
|
+
|
|
|
+ // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
|
|
|
+ // timer(1, timerYellow)
|
|
|
+ // var awaitGrey = await delay(2000);
|
|
|
+ // var styleGrey = (document.getElementById("Yellow").style.background = "grey");
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // trafficLight()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ async function pedestrianTrafficLight() {
|
|
|
+ while (true) {
|
|
|
+ if (true) {
|
|
|
+ red.style.background = "#FF0000";
|
|
|
+ green.style.background = "grey";
|
|
|
+ knopka.disabled = true
|
|
|
+ await delay(3000);
|
|
|
+ knopka.disabled = false;
|
|
|
+ await Promise.race([
|
|
|
+ delay(5000),
|
|
|
+ domEventPromise(knopka, 'click').then((e) => {
|
|
|
+ console.log('event click happens', e)
|
|
|
+
|
|
|
+ })
|
|
|
+ ])
|
|
|
+ if (true) {
|
|
|
+ await delay(1000)
|
|
|
+ knopka.disabled = true
|
|
|
+ green.style.background = " #00FF00"
|
|
|
+ red.style.background = "grey"
|
|
|
+ await delay(8000)
|
|
|
+ red.style.background ="grey"
|
|
|
+ green.style.background = "grey"
|
|
|
+ await delay(2000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ pedestrianTrafficLight()
|
|
|
+
|
|
|
+
|
|
|
+ async function speedtest(getPromise, count, parallel = 1) {
|
|
|
+ let duration = performance.now();
|
|
|
+ let initParallel = parallel;
|
|
|
+ let promisArray = [];
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ promisArray[i] = getPromise();
|
|
|
+ parallel -= 1;
|
|
|
+ await Promise.all(promisArray);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(promisArray);
|
|
|
+
|
|
|
+ duration = performance.now() - duration;
|
|
|
+ console.log(duration);
|
|
|
+ console.log(initParallel * count);
|
|
|
+
|
|
|
+ return {
|
|
|
+ duration: duration,
|
|
|
+ querySpeed: count / duration,
|
|
|
+ queryDuration: duration / count,
|
|
|
+ parallelSpeed: (count / duration) * initParallel,
|
|
|
+ parallelDuration: duration / (initParallel * count),
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ speedtest(() => delay(1000), 10, 10).then((result) =>
|
|
|
+ console.log(result)
|
|
|
+ );
|
|
|
+ speedtest(
|
|
|
+ () =>
|
|
|
+ fetch("http://swapi.dev/api/people/1").then((res) =>
|
|
|
+ res.json()
|
|
|
+ ),
|
|
|
+ 1,
|
|
|
+ 2
|
|
|
+ );
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
