|
|
@@ -1 +1,182 @@
|
|
|
+'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 because in this case!!!
|
|
|
+// can't stop promise countDown after btn was clicked and is does count to the end
|
|
|
+const domEventPromise = (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 btnResolvePromise = document.getElementById('resolvePromise');
|
|
|
+
|
|
|
+async function pedestrianTrafficLight() {
|
|
|
+ while (true) {
|
|
|
+ green.style.backgroundColor = 'gainsboro';
|
|
|
+ red.style.backgroundColor = 'red';
|
|
|
+ await domEventPromise(btnResolvePromise, 'click', 9000, red),
|
|
|
+ (red.style.backgroundColor = 'gainsboro');
|
|
|
+ yellow.style.backgroundColor = 'yellow';
|
|
|
+ await domEventPromise(btnResolvePromise, 'click', 3000, yellow),
|
|
|
+ (yellow.style.backgroundColor = 'gainsboro');
|
|
|
+ green.style.backgroundColor = 'green';
|
|
|
+ await domEventPromise(btnResolvePromise, 'click', 9000, green);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+pedestrianTrafficLight();
|
|
|
+
|
|
|
+//speedTest
|
|
|
+
|
|
|
+const dataLuke = async () =>
|
|
|
+ fetch('https://swapi.py4e.com/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(data => data)
|
|
|
+ .catch(() => {});
|
|
|
+
|
|
|
+async function speedTest(getPromise, count, parallel = 1) {
|
|
|
+ async function makeIterable(promise, n, parallel) {
|
|
|
+ const arr = [];
|
|
|
+ for (let i = 0; i < n; i++) {
|
|
|
+ const arrInner = [];
|
|
|
+ if (parallel > 1) {
|
|
|
+ for (let j = 0; j < parallel; j++) {
|
|
|
+ arrInner.push(promise);
|
|
|
+ }
|
|
|
+ arr.push(arrInner);
|
|
|
+ }
|
|
|
+ if (parallel < 2) {
|
|
|
+ arr.push(promise);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+
|
|
|
+ const readyArr = await makeIterable(getPromise, count, parallel);
|
|
|
+ let querySpeed = 0;
|
|
|
+ let queryDuration = 0;
|
|
|
+ let parallelDuration = 0;
|
|
|
+ let parallelSpeed = 0;
|
|
|
+ const startLoop = performance.now();
|
|
|
+ await Promise.all([
|
|
|
+ ...readyArr.map(async el => {
|
|
|
+ if (typeof el === 'object') {
|
|
|
+ const start = await performance.now();
|
|
|
+ await Promise.all(el.map(async () => await getPromise()));
|
|
|
+ parallelDuration = (await performance.now()) - start;
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ const start = await performance.now();
|
|
|
+ await getPromise();
|
|
|
+ queryDuration = (await performance.now()) - start;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ ]).then(data => console.log(data, 'data'));
|
|
|
+
|
|
|
+ const duration = performance.now() - startLoop;
|
|
|
+ querySpeed = duration / (count * parallel);
|
|
|
+ parallelSpeed = duration / (count * parallel);
|
|
|
+
|
|
|
+ return {
|
|
|
+ duration,
|
|
|
+ querySpeed,
|
|
|
+ queryDuration,
|
|
|
+ parallelSpeed,
|
|
|
+ parallelDuration,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+speedTest(() => delay(10000), 10, 10).then(result =>
|
|
|
+ console.log(result, 'result'),
|
|
|
+);
|
|
|
+
|
|
|
+speedTest(() => delay(1000), 10, 1).then(result =>
|
|
|
+ console.log(result, 'result'),
|
|
|
+);
|
|
|
+speedTest(() => dataLuke(), 20, 3).then(result =>
|
|
|
+ console.log(result, 'result'),
|
|
|
+);
|
