homework/HW14 Async Await/script.js

const red = document.getElementById("red");
const yellow = document.getElementById("yellow");
const green = document.getElementById("green");
        
const knopka = document.getElementById("test");
const btnGo = document.getElementById("go")
const wrapper = document.getElementById("wrapper");
const wrapper2 = document.getElementById("wrapper2")
//  Stage1 Светофор
// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

// async function trafficLight(){
//     while (true){
//       red.classList.remove("red")
//       green.classList.add("green");                    // включаем зеленый
//         await delay(5000)                        
//         yellow.classList.add("yellow")                 // включаем желтый  
//         green.classList.remove("green")
        
//         await delay(2000)                           
//         red.classList.add("red")                    // включаем красный
//         yellow.classList.remove("yellow")
        
//         await delay(5000)
//     }
    
// }

// trafficLight()

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

async function trafficLight2(elem, redTime=3000, yellowTime=1000, greenTime=3000){
  
  for(let i=0; i<3; i++){
        elem.innerHTML +=`<div></div>`;
      }

      while(true){
        elem.children[0].style.backgroundColor="red";
        elem.children[2].style.backgroundColor="";
        await delay(redTime);
        elem.children[1].style.backgroundColor="yellow";
        elem.children[0].style.backgroundColor="";
        await delay(yellowTime);
        elem.children[2].style.backgroundColor="green";
        elem.children[1].style.backgroundColor="";
        await delay(greenTime);
      }
}
trafficLight2(wrapper,3000,1000,3000);

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



//  PedestrianTrafficLight

// async function pedestrianLight(elem, redTime =3000, greenTime=3000){

//   for(let i=0; i<2; i++){
//     elem.innerHTML +=`<div></div>`;
//   }

//       while(true){
//         elem.children[0].style.backgroundColor="red";
//         elem.children[1].style.backgroundColor="";
//         await Promise.race([delay(redTime), domEventPromise(btnGo, 'click')]);

//         elem.children[1].style.backgroundColor="green";
//         elem.children[0].style.backgroundColor="";
//         await delay(greenTime);
//       }
// }
// pedestrianLight(wrapper2, 5000,2000)


// stage 3
async function pedestrianLight(elem, redTime =3000, greenTime=3000){

  for(let i=0; i<2; i++){
    elem.innerHTML +=`<div></div>`;
  }

      while(true){
        elem.children[0].style.backgroundColor="red";
        elem.children[1].style.backgroundColor="";
        await Promise.race([delay(redTime), domEventPromise(btnGo, 'click')]);

        elem.children[1].style.backgroundColor="green";
        elem.children[0].style.backgroundColor="";
        await delay(greenTime);
      }
}
pedestrianLight(wrapper2, 5000,3000)
btnGo.addEventListener('click', handler)

async function handler(){
  btnGo.disabled = true;
  await delay(6000)
  btnGo.disabled = false;
  domEventPromise(knopka, 'click')
}

// speedtest

async function speedtest(getPromise, count,parallel=1){
    const startTime = performance.now();
  
    for (let i = 0; i < count; i++){
      const arrPromise = [];
      await ( async ()=>{
          for (j=0; j<parallel; j++){
            arrPromise.push(getPromise())
          }
          await Promise.all(arrPromise);
      })()
    }
  
    const finishTime = performance.now();

    let duration = finishTime - startTime;
    
      return {
        duration,
          querySpeed: count / duration, //средняя скорость одного запроса
          queryDuration: duration/count,
          parallelSpeed : (parallel*count)/duration,
          parallelDuration: duration/(count * parallel)
      }
  }
  
  speedtest(() => delay(1000).then(result => console.log(result)), 10, 10 ).then(res=>console.log(res))
  // {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(res=>console.log(res))