HomeWorks/HW15 generator and async await 2/script.js

//Async/Await Homework 2
const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

//Используя асинхронную функцию и бесконечный цикл, просимулируйте светофор:


/* async function trafficLight(){
    while (true){
        document.querySelector('.green').style.backgroundColor = 'green';
        document.querySelector('.red').style.backgroundColor = '';
        await delay(3000);
        document.querySelector('.green').style.backgroundColor = '';
        document.querySelector('.yellow').style.backgroundColor = 'yellow'; 
        await delay(500)
        document.querySelector('.yellow').style.backgroundColor = ''; 
        document.querySelector('.red').style.backgroundColor = 'red';
        await delay(2000)
    }
}
trafficLight(); */

//Stage 2
//Сделайте trafficLight более универсальной - добавьте в параметры DOM-элемент для отображения, 
//а так же время работы каждого цвета


async function trafficLight(rootElClass, greenDelay, redDelay, yellowDelay){
    let root = document.querySelector(rootElClass);
    for (let i = 0; i <3; i++){
        let div = document.createElement('div');
        div.style.backgroundColor = 'black';
        root.append(div);
    }
    while (true){
        root.children[0].style.backgroundColor = 'green';
        root.children[2].style.backgroundColor = '';
        await delay(greenDelay);
        root.children[1].style.backgroundColor = 'yellow';
        root.children[0].style.backgroundColor = '';
        await delay(redDelay)
        root.children[2].style.backgroundColor = 'red';
        root.children[1].style.backgroundColor = '';
        await delay(yellowDelay)
    }
   
}
trafficLight('.wrapper', 1000, 800, 2000);

// domEventPromise
// Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:

// domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))

//  Функция должна:
// используя addEventListener повесить свой обработчик события на DOM element событие eventName
// по событию зарезолвить промис отдав в качестве результата объект события
// убрать обработчик с DOM-элемента, используя removeEventListener

function domEventPromise(element, eventName){
   
    return new Promise(function (resolve, reject){ 
        const resolver = (e) => {
           resolve(e.target) 
           removeEventListener(eventName, resolver);
           
        };
        element.addEventListener(eventName, resolver); 
        
    })
}
//domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))

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


// async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
//     let root = document.querySelector(rootElClass);
//     for (let i = 0; i < 2; i++){
//         let div = document.createElement('div');
//         div.style.backgroundColor = 'black';
//         root.append(div);
//     }
//     while (true){
//         root.children[0].style.backgroundColor = 'green';
//         root.children[1].style.backgroundColor = '';
//         await delay(greenDelay);
//         root.children[1].style.backgroundColor = 'red';
//         root.children[0].style.backgroundColor = '';
//         await delay(redDelay)
//     }
// }
// PedestrianTrafficLight('.wrapper1', 3000,2500);


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


// async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
//         let root = document.querySelector(rootElClass);
//         for (let i = 0; i < 2; i++){
//             let div = document.createElement('div');
//             div.style.backgroundColor = 'black';
//             root.append(div); 
//         }  
        
//         while (true){
//                     root.children[0].style.backgroundColor = 'green';
//                     root.children[1].style.backgroundColor = '';
//                     await delay(greenDelay);
//                     root.children[1].style.backgroundColor = 'red';
//                     root.children[0].style.backgroundColor = '';
//                     await Promise.race([delay(redDelay), domEventPromise(knopka, 'click')]);
//                 }
//     }   

//     PedestrianTrafficLight('.wrapper1', 2000, 4500);


// Stage 3
// Не давайте возможности пешеходам сильно наглеть - предусмотрите задержку, после которой будет работать кнопка.

async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
    let root = document.querySelector(rootElClass);
    for (let i = 0; i < 2; i++){
        let div = document.createElement('div');
        div.style.backgroundColor = 'black';
        root.append(div); 
    }  

    let buttonResolver = (knopka) => new Promise(() => {
        setTimeout(() => {
           // console.log('start');
            knopka.disabled = ""}, 10000);
        }, () => reject)
    
    while (true){
                
                root.children[0].style.backgroundColor = 'green';
                root.children[1].style.backgroundColor = '';
                await Promise.race([delay(greenDelay), buttonResolver(knopka)]);
                 
                root.children[1].style.backgroundColor = 'red';
                root.children[0].style.backgroundColor = '';
                
                await Promise.race([delay(redDelay), domEventPromise(knopka, 'click')]).then( e => {
                    e.disabled = 'true';
                });
                
            }
}   

PedestrianTrafficLight('.wrapper1', 2000, 4500);


// speedtest
// Написать асинхронную функцию
// где:
// count - количество повторов
// parallel - количество одновременных запросов/промисов в одном повторе
// getPromise - функция, которая умеет вернуть нужный Вам промис для тестирования скорости его работы

// которая будет в цикле count раз создавать parallel промисов с помощью переданной функции getPromise, дожидаться выполнения всех parallel промисов, после чего цикл повторяется.

// Замерить время общее время выполнения, и вычислить:
// duration, общую длительность работы цикла
// parallelDuration, среднее время обработки запроса параллельно (за какое время исполнилось parallel*count промисов),
// paralledSpeed, скорость в запросах в миллисекунду
// queryDuration, реальное среднее время запроса (отталкиваясь от count и времени работы цикла).
// querySpeed, реальное средняя скорость запроса
// Эти переменные вернуть в одном объекте-результате (см. заготовку выше)
// Для отладки попробуйте на delay (пример выше есть, реальное время будет отличаться на единицы-десятки миллисекунд). Потом можете попробовать на swapi.dev. Не создавайте чрезмерно много параллельных запросов.
    

    async function speedtest(getPromise, count, parallel = 1){
        let duration = performance.now()
        let initParallel = parallel;
        let promisArray = [];
        for(let i = 0; i < count; i++) { 
            promisArray[i] = getPromise();
            parallel -= 1 
            await Promise.all(promisArray)         
        }
       
        
        console.log(promisArray); 
       
        
        duration = performance.now() - duration
        console.log(duration)
        console.log((initParallel * count))

          return {
          duration: duration,
          querySpeed: count / duration, 
          queryDuration: duration / count,
          parallelSpeed: count/ duration * initParallel,
          parallelDuration: duration /(initParallel * count)
        }

      }

      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()), 1, 2)