hw-js-13-async-2/src/java-script/hw.js

'use strict';
// Async/Await Homework 2

// Светофор

const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
const lights = document.getElementById('traffic').children;
const red = lights[0];
const yellow = lights[1];
const green = lights[2];

async function trafficLight() {
  while (true) {
    green.style.backgroundColor = 'gainsboro';
    red.style.backgroundColor = 'red';
    await delay(1000);
    red.style.backgroundColor = 'gainsboro';
    yellow.style.backgroundColor = 'yellow';
    await delay(1000);
    yellow.style.backgroundColor = 'gainsboro';
    green.style.backgroundColor = 'green';
    await delay(1000);
  }
}
// trafficLight();

// Stage 2
const delayUpdated = (ms, el) =>
  new Promise((resolve, _reject) => {
    let n = Math.round(ms / 1000);
    const intervalID = setInterval(handleInterval, 1000);
    function handleInterval() {
      if (n === 0) {
        el.textContent = '';
        clearInterval(intervalID);
        return resolve(ms);
      }
      el.textContent = n;
      n -= 1;
    }
  });

async function trafficLightUpdated() {
  while (true) {
    green.style.backgroundColor = 'gainsboro';
    red.style.backgroundColor = 'red';
    await delayUpdated(9000, red);
    red.style.backgroundColor = 'gainsboro';
    yellow.style.backgroundColor = 'yellow';
    await delayUpdated(3000, yellow);
    yellow.style.backgroundColor = 'gainsboro';
    green.style.backgroundColor = 'green';
    await delayUpdated(9000, green);
  }
}
// trafficLightUpdated();

//domEventPromise + Stage 2 + Stage 3
// i've done with my way, and do not see any sens in promise.race([delayPromise,domEventPromise]) because in this case
// will not stop execution promise "countDown" after btn was clicked and is does count to the end ,by this reason
// i decided insert all logic into onePromise "handleTrafficPromise"
const handleTrafficPromise = (btn, type, ms, el) =>
  new Promise((resolve, _reject) => {
    let n = Math.round(ms / 1000);
    const intervalID = setInterval(handleInterval, 1000);
    function handleInterval() {
      if (n === 0) {
        el.textContent = '';
        clearInterval(intervalID);
        return resolve(ms);
      }
      el.textContent = n;
      n -= 1;
    }
    const handleResolve = async e => {
      btn.style.backgroundColor = 'grey';
      btn.setAttribute('disabled', '');
      el.textContent = '';
      clearInterval(intervalID);
      resolve(e);
      btn.removeEventListener(type, handleResolve);
      await setTimeout(() => {
        btn.removeAttribute('disabled');
        btn.style.backgroundColor = 'green';
      }, 2000);
    };

    btn.addEventListener(type, handleResolve);
  });
const btn = document.getElementById('resolvePromise');
async function pedestrianTrafficLight() {
  while (true) {
    green.style.backgroundColor = 'gainsboro';
    red.style.backgroundColor = 'red';
    await handleTrafficPromise(btn, 'click', 9000, red),
      (red.style.backgroundColor = 'gainsboro');
    yellow.style.backgroundColor = 'yellow';
    await handleTrafficPromise(btn, 'click', 3000, yellow),
      (yellow.style.backgroundColor = 'gainsboro');
    green.style.backgroundColor = 'green';
    await handleTrafficPromise(btn, 'click', 9000, green);
  }
}
pedestrianTrafficLight();

//speedTest
async function speedTest(getPromise, count, parallel = 1) {
  async function makeIterable() {
    const arr = [];
    for (let i = 0; i < count; i++) {
      const arrInner = [];
      for (let j = 0; j < parallel; j++) {
        arrInner.push([]);
      }
      arr.push(arrInner);
    }
    return arr;
  }
  let duration = performance.now();
  const arr = await makeIterable();
  await Promise.all(
    arr.map(
      async el => await Promise.all(el.map(async () => await getPromise())),
    ),
  );
  duration = performance.now() - duration;
  return {
    duration,
    querySpeed: count / duration,
    queryDuration: duration / count,
    parallelSpeed: (count * parallel) / (duration / count),
    parallelDuration: duration / (count * parallel),
  };
}

speedTest(() => delay(10000), 10, 10).then(result =>
  console.log(result, 'result delay(10000)'),
);
speedTest(() => delay(1000), 10, 1).then(result =>
  console.log(result, 'result delay(1000)'),
);
const dataLuke = async () =>
  fetch('https://swapi.py4e.com/api/people/1/')
    .then(res => res.json())
    .then(data => data)
    .catch(() => {});
speedTest(() => dataLuke(), 20, 3).then(result =>
  console.log(result, 'result dataLuke'),
);