|
|
@@ -0,0 +1,151 @@
|
|
|
+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))
|
|
|
+
|
