|
|
@@ -0,0 +1,182 @@
|
|
|
+<!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>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <style>
|
|
|
+ .light {
|
|
|
+ width: 250px;
|
|
|
+ height: 250px;
|
|
|
+ margin-top: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .trafficLightWrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ #trafficLightBlock,
|
|
|
+ #predestrianTrafficLightBlock {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 300px;
|
|
|
+ height: fit-content;
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <div class="trafficLightWrapper">
|
|
|
+ <div id="trafficLightBlock">
|
|
|
+ <div id="" class="light green"></div>
|
|
|
+ <div id="" class="light yellow"></div>
|
|
|
+ <div id="" class="light red"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="predestrianTrafficLightBlock">
|
|
|
+ <div id="" class="light green"></div>
|
|
|
+ <div id="" class="light red"></div>
|
|
|
+
|
|
|
+ <button id="stopButton">STOP</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const changeLightColor = (parent, light) => {
|
|
|
+ parent.querySelector(`.${light}`).style.background = light;
|
|
|
+
|
|
|
+ [...parent.querySelectorAll(`.light`)]
|
|
|
+ .filter((el) => !el.classList.contains(light))
|
|
|
+ .map((el) => (el.style.background = "none"));
|
|
|
+ };
|
|
|
+ const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
|
|
|
+//CВЕТОФОР
|
|
|
+ // async function trafficLight(params = {}) {
|
|
|
+ // let { element, yellow = null, red = null, green = null } = params;
|
|
|
+ // while (true) {
|
|
|
+ // if (green) {
|
|
|
+ // changeLightColor(element, "green");
|
|
|
+ // await delay(green);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (yellow) {
|
|
|
+ // changeLightColor(element, "yellow");
|
|
|
+ // await delay(yellow);
|
|
|
+ // }
|
|
|
+ // if (red) {
|
|
|
+ // changeLightColor(element, "red");
|
|
|
+ // await delay(red);
|
|
|
+ // }
|
|
|
+ // if (yellow) {
|
|
|
+ // changeLightColor(element, "yellow");
|
|
|
+ // await delay(yellow);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // trafficLight({
|
|
|
+ // element: trafficLightBlock,
|
|
|
+ // red: 3000,
|
|
|
+ // yellow: 1000,
|
|
|
+ // green: 3000,
|
|
|
+ // });
|
|
|
+
|
|
|
+//DOMEVENTPROMISE
|
|
|
+
|
|
|
+ // const domEventPromise = (element, event) => {
|
|
|
+ // return new Promise((resolve, reject) => {
|
|
|
+ // element.addEventListener(event, (e) => {
|
|
|
+ // resolve(e);
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+
|
|
|
+ // domEventPromise(document, "click").then((e) => console.log("event click happens", e));
|
|
|
+
|
|
|
+//PEDESTRIANTRAFFICLIGHT
|
|
|
+ // let isStopButtonReady = true;
|
|
|
+ // const domEventPromise = (element, event) => {
|
|
|
+ // return new Promise((resolve, reject) => {
|
|
|
+ // isStopButtonReady &&
|
|
|
+ // element.addEventListener(event, (e) => {
|
|
|
+ // isStopButtonReady = false;
|
|
|
+ // setTimeout(() => (isStopButtonReady = true), 5000);
|
|
|
+ // resolve(e);
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+
|
|
|
+ // async function trafficLight(params = {}) {
|
|
|
+ // let { element, yellow = null, red = null, green = null } = params;
|
|
|
+ // while (true) {
|
|
|
+ // if (green) {
|
|
|
+ // changeLightColor(element, "green");
|
|
|
+ // await delay(green);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (yellow) {
|
|
|
+ // changeLightColor(element, "yellow");
|
|
|
+ // await delay(yellow);
|
|
|
+ // }
|
|
|
+ // if (red) {
|
|
|
+ // changeLightColor(element, "red");
|
|
|
+ // await Promise.race([delay(red), domEventPromise(stopButton, "click")]);
|
|
|
+ // }
|
|
|
+ // if (yellow) {
|
|
|
+ // changeLightColor(element, "yellow");
|
|
|
+ // await delay(yellow);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // trafficLight({
|
|
|
+ // element: predestrianTrafficLightBlock,
|
|
|
+ // red: 3000,
|
|
|
+ // green: 2000,
|
|
|
+ // });
|
|
|
+
|
|
|
+//SPEEDTEST
|
|
|
+ // async function speedtest(getPromise, count, parallel = 1) {
|
|
|
+ // let duration = 0;
|
|
|
+
|
|
|
+ // for (let i = 0; i < count; i++) {
|
|
|
+ // let promises = [];
|
|
|
+ // let time1 = performance.now();
|
|
|
+ // for (let promiseIndex = 1; promiseIndex <= parallel; promiseIndex++) {
|
|
|
+ // promises[promises.length] = getPromise();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // await Promise.all(promises);
|
|
|
+ // let time2 = performance.now();
|
|
|
+ // duration += Math.floor(time2 - time1);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let time2 = performance.now();
|
|
|
+ // let querySpeed = +(count / duration).toFixed(5);
|
|
|
+ // let queryDuration = duration / parallel;
|
|
|
+ // let parallelSpeed = +((count * parallel) / duration).toFixed(5);
|
|
|
+ // 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).then((result) =>
|
|
|
+ // console.log(result)
|
|
|
+ // );
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
ilya_shyian