Homework/js/14_async-await/tasks/index.js

// trafficLightWrapp()
function trafficLightWrapp() {

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

   async function trafficLight(parent, redTime, yellowTime, greenTime) {
      const wrapp = document.createElement('div')
      wrapp.style.width = 'max-content'
      wrapp.style.padding = '10px'
      wrapp.style.backgroundColor = '#333'
      const cell = document.createElement('div')
      cell.style.margin = '3px'
      cell.style.height = '100px'
      cell.style.width = '100px'
      cell.style.backgroundColor = '#999'
      cell.style.borderRadius = '50%'      
      const red = cell.cloneNode(true)
      const yellow = cell.cloneNode(true)
      const green = cell.cloneNode(true)
      wrapp.append(red)
      wrapp.append(yellow)
      wrapp.append(green)
      parent.append(wrapp)

      turnOn = (cell, color) => {
         cell.style.backgroundColor = color
      }

      turnOff = (cell) => {
         cell.style.backgroundColor = '#999'
      }

      while (true) {
            turnOn(green, 'green')
         await delay(greenTime)
            turnOff(green)
            turnOn(yellow, 'yellow')
         await delay(yellowTime)
            turnOff(yellow)
            turnOn(red, 'red')
         await delay(redTime)
            turnOn(yellow, 'yellow')
         await delay(yellowTime)
            turnOff(yellow)
            turnOff(red)
      }
   }
   trafficLight(container1, 3000, 1000, 3000)
}



// domEventPromiseWrapp()
function domEventPromiseWrapp() {

   const knopka = document.createElement('button')
   knopka.innerText = 'Кликай'
   container1.append(knopka)
   
   function domEventPromise(element, eventName) {
      return new Promise(function(resolve, reject) {
         let listener = function (event) {
            element.removeEventListener(eventName, listener)
            resolve(event)
         }
         element.addEventListener(eventName, listener)
      })
   }
   domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
}



pedestrianTrafficLightWrapp()
function pedestrianTrafficLightWrapp() {

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

   async function trafficLight2(parent, redTime, greenTime) {
      const wrapp = document.createElement('div')
      wrapp.style.width = 'max-content'
      wrapp.style.padding = '10px'
      wrapp.style.backgroundColor = '#333'
      const cell = document.createElement('div')
      cell.style.margin = '3px'
      cell.style.height = '100px'
      cell.style.width = '100px'
      cell.style.backgroundColor = '#999'
      cell.style.borderRadius = '50%'      
      const red = cell.cloneNode(true)
      const green = cell.cloneNode(true)
      wrapp.append(red)
      wrapp.append(green)
      parent.append(wrapp)

      turnOn = (cell, color) => {
         cell.style.backgroundColor = color
      }

      turnOff = (cell) => {
         cell.style.backgroundColor = '#999'
      }


      const knopka = document.createElement('button')
      knopka.innerText = 'ВКЛЮЧИТЬ ЗЕЛЕНЫЙ'
      container1.append(knopka)
   
      function domEventPromise(element, eventName) {
         return new Promise(function(resolve, reject) {
            let listener = function (event) {
               element.removeEventListener(eventName, listener)
               resolve(event) 
            }
            element.addEventListener(eventName, listener)
         })
      }
      
      while (true) {
            turnOn(green, 'green')
         await delay(greenTime)
            turnOff(green)
            turnOn(red, 'red')
         await delay(redTime/2)
         await Promise.race([domEventPromise(knopka, 'click'), delay(redTime/2)])
            turnOff(red)
      }
   }
   trafficLight2(container1, 6000, 6000)

}



// speedTestWrapp()
function speedTestWrapp() {
   

   const gql = (url, query, variables) => fetch(url, {
      method: 'POST',   
      headers: {'content-type': 'application/json'}, 
      body: JSON.stringify({query, variables}),
   });

   (async function() {
      let response = await gql("http://shop-roles.asmer.fs.a-level.com.ua/graphql", `query cats($q:String) {
         CategoryFind(query:$q){
            name goods{
               name images{
               url
               }
            }
         }
      }`, {q: "[{}]"});
      let result = await response.json();
   })()



   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)

}