homework/js/20_async_await_svetofor/hw20.js

const delaySec = (sec) =>
    new Promise((ok) => setTimeout(() => ok(sec), sec * 1000));

async function trafficLight(
    domElement,
    { redSec = 5, yellowSec = 2, greenSec = 3 } = {}
) {
    while (true) {
        domElement.children[2].style.background = "green";
        await delaySec(greenSec);
        domElement.children[2].style.background = "";

        domElement.children[1].style.background = "yellow";
        await delaySec(yellowSec);
        domElement.children[1].style.background = "";

        domElement.children[0].style.background = "red";
        await delaySec(redSec - 1);
        domElement.children[1].style.background = "yellow";
        await delaySec(1);
        domElement.children[0].style.background = "";
        domElement.children[1].style.background = "";
    }
}

trafficLight(lights3, { greenSec: 5 });

//

// domEventPromise
// Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:
// domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
// Функция должна:
// используя addEventListener повесить свой обработчик события на DOM element событие eventName
// по событию зарезолвить промис отдав в качестве результата объект события
// убрать обработчик с DOM-элемента, используя removeEventListener

let domEventPromise = (domElement, eventName) =>
    new Promise((resolve) => {
        let res = function (e) {
            resolve(e);
            domElement.removeEventListener(eventName, res);
            console.log("domEventPromise - done");
        };

        domElement.addEventListener(eventName, res);
    });

knopka2.onclick = () =>
    domEventPromise(knopka, "click").then((e) =>
        console.log("event click happens", e)
    );

//

// PedestrianTrafficLight
// Напишите упрощенный светофор для пешеходов

function innerTimer(domElement, sec) {
    for (let i = sec; i > 0; i--) {
        setTimeout(() => (domElement.innerText = i), (sec - i) * 1000);
    }
    setTimeout(() => (domElement.innerText = ""), sec * 1000);
}

async function pedestrianTrafficLight(
    domElement,
    { redSec = 10, greenSec = 3 } = {}
) {
    domElement.children[1].style.background = "lightgreen";
    innerTimer(domElement.children[1], greenSec);
    await delaySec(greenSec);
    domElement.children[1].style.background = "";

    domElement.children[0].style.background = "red";
    innerTimer(domElement.children[0], redSec);
    await delaySec(redSec);
    domElement.children[0].style.background = "";
}

async function pedestrianManage(domElement) {
    while (true) {
        await pedestrianTrafficLight(domElement, { redSec: 6 });
    }
}

pedestrianManage(lights2);

//

// Stage 2
// Используя Promise.race, domEventPromise и кнопку в DOM сделайте пешеходный светофор с кнопкой,
// который так же переключается по времени периодически.
// Stage 3
// Не давайте возможности пешеходам сильно наглеть - предусмотрите задержку, после которой будет работать кнопка.

//

// Логика работы светофора:
// бОльшую часть времени светофор работает для машин и изредка автоматически включается для пешеходов
// 20 сек - красный (машины едут)
// 5 сек - зеленый(идут пешеходы)
// Для особо спешащих пешеходов есть кнопка, которая позволяет ТОЛЬКО  в фазе "красный" переключиться сразу на зеленый
// После этого незапланированного "зеленого" цикла продолжит дорабатывать свое время "красный" цикл.
// но за такую спешку надо платить: 20 секнд после "зеленого" нажать на кнопку будет нельзя а новая фаза "красного"
// начнется без прерывания на зеленый (то есть пропуск "зеленой" фазы, которая должна была бы быть по расписанию)

async function pedestrianManageBtn(domElement) {
    //
    async function redLite(redTime) {
        domElement.children[1].style.background = "";
        domElement.children[0].style.background = "red";
        innerTimer(domElement.children[0], redTime);
        await delaySec(redTime);
        // return "red";
    }

    async function greenLite(greenTime) {
        goButton.disabled = true;
        domElement.children[0].style.background = "";
        domElement.children[1].style.background = "lightgreen";
        innerTimer(domElement.children[1], greenTime);
        await delaySec(greenTime);
        domElement.children[1].style.background = "";
        domElement.children[0].style.background = "red";
        if (goButton.innerText === "GO") {
            goButton.disabled = false;
        }
        // return "green";
    }

    let goButtonDelay = 20; // задержка кнопки в секундах - плата за экстренный зеленый
    let redDelay = 20; // стандартное время работы красного в секундах
    let greenDelay = 5; // стандартное время работы зеленого в секундах
    let btn, red, green;
    let isGoButtonPressed;

    while (true) {
        isGoButtonPressed = false;
        btn = domEventPromise(goButton, "click");
        btn.then(() => {
            goButton.disabled = true;
            isGoButtonPressed = true;
            innerTimer(goButton, goButtonDelay + greenDelay);
            setTimeout(() => {
                if (domElement.children[1].style.background !== "lightgreen")
                    goButton.disabled = false;
                goButton.innerText = "GO";
            }, (goButtonDelay + greenDelay) * 1000);
        });

        while (!isGoButtonPressed) {
            await Promise.race([btn, (red = redLite(redDelay))]).then(
                () => (green = greenLite(greenDelay))
            );
            await Promise.all([red, green]);
            console.log("await Promise.all([red, green])");
        }
    }

    //  ниже - старый но рабочий вариант

    // while (true) {
    //     await Promise.race([(btn = domEventPromise(goButton, "click")), (red = redLite(20))]).then(() => {
    //         green = greenLite(5);
    //         btn.then(() => {
    //             innerTimer(goButton, 20);
    //             goButton.disabled = true;
    //             setTimeout(() => {
    //                 goButton.disabled = false;
    //                 goButton.innerText = "GO";
    //             }, 20000);
    //         });
    //     });

    //     await Promise.all([red, green]);
    // }
}

pedestrianManageBtn(lights2btn);

//

//

// speedtest
// Написать асинхронную функцию
// async function speedtest(getPromise, count,parallel=1){
// ....
//     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)
// где:
// count - количество повторов
// parallel - количество одновременных запросов/промисов в одном повторе
// getPromise - функция, которая умеет вернуть нужный Вам промис для тестирования скорости его работы
// которая будет в цикле count раз создавать parallel промисов с помощью переданной функции getPromise,
// дожидаться выполнения всех parallel промисов, после чего цикл повторяется.
// Замерить время общее время выполнения, и вычислить:
// duration, общую длительность работы цикла
// parallelDuration, среднее время обработки запроса параллельно (за какое время исполнилось parallel*count промисов),
// paralledSpeed, скорость в запросах в миллисекунду
// queryDuration, реальное среднее время запроса (отталкиваясь от count и времени работы цикла).
// querySpeed, реальное средняя скорость запроса
// Эти переменные вернуть в одном объекте-результате (см. заготовку выше)
// Для отладки попробуйте на delay (пример выше есть, реальное время будет отличаться на единицы - десятки миллисекунд).
// Потом можете попробовать на swapi.dev.Не создавайте чрезмерно много параллельных запросов.

const delay = (msec) =>
    new Promise((resolve) => setTimeout(() => resolve(msec), msec));

let setTimer = function () {
    let timeStart = performance.now();
    return function () {
        return performance.now() - timeStart;
    };
};

async function speedtest(getPromise, count = 1, parallel = 1) {
    //
    let duration, querySpeed, queryDuration, parallelSpeed, parallelDuration;

    let promiseArr = [];

    duration = setTimer();
    for (let iterations = 0; iterations < count; iterations++) {
        for (let together = 0; together < parallel; together++)
            promiseArr.push(getPromise());

        // let timer = setTimer();
        await Promise.all(promiseArr);
        // timer = timer();
    }
    duration = duration();
    parallelSpeed = (count * parallel) / duration;
    parallelDuration = 1 / parallelSpeed;
    queryDuration = duration / count;
    querySpeed = 1 / queryDuration;

    return {
        duration,
        querySpeed,
        queryDuration,
        parallelSpeed,
        parallelDuration,
    };
}

speedtest(() => delay(1000), 10, 10).then((result) =>
    console.log(" delay(1000) ", result)
);

speedtest(
    () => fetch("http://swapi.dev/api/people/1").then((res) => res.json()),
    10,
    5
).then((result) => console.log(" swapi.dev ", result));