Roman456
/
js15_RomanenkoGenerators


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #lights,
    #ptl {
        width: 200px;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
        padding: 20px;
    }

    span {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    #green {
        background-color: green;
        visibility: hidden;
    }

    #yellow {
        background-color: yellow;
        visibility: hidden;
    }

    #red {
        background-color: red;
        visibility: hidden;
    }

    /* #white {
        background-color: green;
        visibility: hidden;
    }

    #pink {
        background-color: pink;
        visibility: hidden;
    }

    #blue {
        background-color: blue;
        visibility: hidden;
    } */
    #green_ptl {
        background-color: green;
        visibility: hidden;
    }

    #red_ptl {
        background-color: red;
        visibility: hidden;
    }

    .box_btn_lights,
    .box_btn_ptl {
        margin-bottom: 30px;
    }

    button {
        height: 30px;
        /* width: 60px; */
    }
</style>

<body>
    <div id="lights">
        <span id="green"></span>
        <span id="yellow"></span>
        <span id="red"></span>
        <!-- <span id="pink"></span>
        <span id="blue"></span>
        <span id="white"></span> -->
    </div>
    <div class="box_btn_lights">
        <button class="knopka">domEventPromise</button>
    </div>
    <div id="ptl">
        <span id="green_ptl"></span>
        <span id="red_ptl"></span>
    </div>
    <div class="box_btn_ptl">
        <button class="knopka_ptl">GO</button>
    </div>

    <!-- <button id='button'>click here</button> -->
    <script>
        let greenL = document.getElementById('green')
        let yellowL = document.getElementById('yellow')
        let redL = document.getElementById('red')
        // let pinkL = document.getElementById('pink')
        // let blueL = document.getElementById('blue')
        // let whiteL = document.getElementById('white')
        // let button = document.getElementById('button')
        let greenPTL = document.getElementById('green_ptl')
        let redPTL = document.getElementById('red_ptl')

        let knopka = document.querySelector('.knopka')
        let knopkaPTL = document.querySelector('.knopka_ptl')

        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

        // trafficLight && Stage 2

        function timer(item, ms) {
            for (let j = 0; j <= (+`${(ms/1000)}`); j++) {
                setTimeout(() => (j == (+`${(ms/1000)}`)) ? console.log("поехали") : item
                    .innerText = (+`${(ms/1000)}`) - j, `${j * 1000}`)
            }
        }

        async function trafficLight(...args) {
            //debugger
            while (true) {
                for (i in args) {
                    args[i].style.visibility = 'visible';
                    timer(args[i], 3000)
                    await delay(3000)
                    args[i].style.visibility = 'hidden'
                }
            }
        }
        trafficLight(greenL, yellowL, redL) //, pinkL, blueL, whiteL

        // async function trafficLight() {
        //     while (true) {
        //         greenL.style.visibility = 'visible' //включаем зеленый
        //         await delay(3000) //время зеленого
        //         greenL.style.visibility = 'hidden'
        //         yellowL.style.visibility = 'visible'
        //         await delay(3000) //время желтого
        //         yellowL.style.visibility = 'hidden'
        //         redL.style.visibility = 'visible'
        //         await delay(3000) //время красного
        //         redL.style.visibility = 'hidden'
        //     }
        // }
        // trafficLight()


        //-------------------domEventPromise--------------------
        function domEventPromise(domElem, eventName) {
            return new Promise((resolve, reject) => { // executor
                domElem.addEventListener(eventName, f);

                function f() {
                    console.log('hi');
                    resolve(event); //резолвим нашу кнопку
                    domElem.removeEventListener(eventName, f);
                };
            });
        };
        // console.log(domEventPromise(knopka, 'click'))
        domEventPromise(knopka, 'click').then(e => console.log('event click happens', e)); //e - 

  
        //PedestrianTrafficLight
        async function PedestrianTrafficLight(green, red) {
            while (true) {
                green.style.visibility = 'visible';
                timer(green, 5000);
                await delay(5000);
                green.style.visibility = 'hidden';
                red.style.visibility = 'visible';
                timer(red, 5000);
                let user = await Promise.race(
                    [domEventPromise(knopkaPTL, 'click'), 
                    delay(5000)]);
                    if(user == event) {
                    console.log('event click happens', event)
                    await delay(2000);
                }
                red.style.visibility = 'hidden';
            }
        }

        PedestrianTrafficLight(greenPTL, redPTL); //, pinkL, blueL, whiteL


        //speedtest
        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

        async function speedtest(getPromise, count, parallel = 1) {
            let querySpeed = 0;
            let queryDuration = 0;
            let parallelDuration = 0;
            let parallelSpeed = 0;
            let StartTime = performance.now()
            for (let i = 0; i < count; i++) {
                let PromiseArr = []
                for (let j = 0; j < parallel; j++) {
                    //let count;
                    PromiseArr.push(getPromise())
                }
                await Promise.all(PromiseArr);
                console.log(PromiseArr)
            }


            let stopTime = performance.now()
            duration = stopTime - StartTime
            parallelDuration = duration / (count * parallel)
            parallelSpeed = 1 / parallelDuration
            queryDuration = duration / count
            querySpeed = 1 / queryDuration //count / duration


            console.log('duration: ' + duration)
            console.log('queryDuration: ' + queryDuration)
            console.log('querySpeed: ' + querySpeed)
            console.log('parallelDuration: ' + parallelDuration)
            console.log('parallelSpeed: ' + parallelSpeed)
            console.log()


            return {
                duration,
                querySpeed, //средняя скорость одного запроса
                queryDuration, //
                parallelSpeed,
                parallelDuration
            }
        }

        speedtest(() => delay(1000), 10, 10).then(result => console.log(result))
        // {duration: 10000, 
        // querySpeed: 0.001, //1 тысячная запроса за миллисекунду 1/1000
        // 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)
    </script>
</body>

</html>