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 +=`
`; } 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 +=``; // } // 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 +=``; } 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