ilya_shyian
/
homework


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