const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms)) let dom1 = document.getElementById('color') let dom2 = document.getElementById('humanColor') let switchTraffic = true async function trafficLight(dom) { let red = document.getElementById('red') let yellow = document.getElementById('yellow') let green = document.getElementById('green') let redTimer = document.getElementById('redTimer') let greenTimer = document.getElementById('greenTimer') while (true) { await delay(500) .then(() => red.style.opacity = 1) await delay(10000) .then(() => red.style.opacity = 0.3) .then(timer(10, redTimer)) await delay(500) .then(() => yellow.style.opacity = 1) await delay(1000) .then(() => yellow.style.opacity = 0.3) await delay(500) .then(() => green.style.opacity = 1) await delay(10000) .then(() => green.style.opacity = 0.3) .then(timer(10, greenTimer)) await delay(500) .then(() => yellow.style.opacity = 1) await delay(1000) .then(() => yellow.style.opacity = 0.3) } } let btn = document.getElementById('btn') async function humanTrafficLight(dom) { //добавил обертку в html, указал параметр ради задания let red = document.getElementById('humanRed') let green = document.getElementById('humanGreen') let redTimer = document.getElementById('humanRedTimer') let greenTimer = document.getElementById('humanGreenTimer') if (switchTraffic) { while (true) { await delay(500) .then(() => green.style.opacity = 1) await delay(10000) .then(() => green.style.opacity = 0.3) .then(timer(10, greenTimer)) await delay(1500) await delay(500) .then(() => red.style.opacity = 1) await delay(10000) .then(() => red.style.opacity = 0.3) .then(timer(10, redTimer)) await delay(1500) } } else { while (true) { await delay(500) .then(() => red.style.opacity = 1) await delay(10000) .then(() => red.style.opacity = 0.3) .then(timer(10, redTimer)) await delay(1500) await delay(500) .then(() => green.style.opacity = 1) await delay(10000) .then(() => green.style.opacity = 0.3) .then(timer(10, greenTimer)) await delay(1500) } } } async function timer(time, value) { for (time; time > 0; time--) { value.innerHTML = time await delay(1000) value.innerHTML = "" } } trafficLight(dom1) humanTrafficLight(dom2) function domEventPromise(click, eventName) { return new Promise((resolve) => { click.addEventListener(eventName, (e) => { switchTraffic = !switchTraffic humanTrafficLight(dom2) resolve(e) }) click.removeEventListener(eventName, (e) => { resolve(e) }) }) } btn.onclick = () => domEventPromise(btn, 'click').then(e => console.log('event click happens', e))