<!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>