'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'), );