123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- const domEventPromise = (element, eventName) => {
- return new Promise((resolve, reject) => {
- const handler = event => {
- resolve(event);
- element.removeEventListener(eventName, handler);
- }
- element.addEventListener(eventName, handler);
- });
- }
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
- const toggleLight = (switcher, className) => {
- const element = document.querySelector(className).classList;
- switcher ? element.add('on') : element.remove('on');
- }
- const addDomElement = (element) => {
- for(let i = 1; i <= 3; i++) {
- const domElement = document.createElement(element);
- domElement.classList.add('traffic-light__element');
- if(i === 1) {
- domElement.classList.add('green');
- } else if (i === 2) {
- domElement.classList.add('yellow');
- } else {
- domElement.classList.add('red');
- }
- trafficLightId.appendChild(domElement);
- }
- }
- const trafficLight = async (domElement, delayGreen, delayYellow, delayRed) => {
- addDomElement(domElement);
- while (true){
- toggleLight(false,'.red');
- toggleLight(true,'.green');
- await Promise.race([delay(delayGreen), Promise.all([delay(1000), domEventPromise(button, 'click')])]);
- toggleLight(false,'.green');
- toggleLight(true,'.yellow');
- await Promise.race([delay(delayYellow), Promise.all([delay(1000), domEventPromise(button, 'click')])]);
- toggleLight(false,'.yellow');
- toggleLight(true,'.red');
- await Promise.race([delay(delayRed), Promise.all([delay(1000), domEventPromise(button, 'click')])]);
- }
- }
- trafficLight('div',2000, 4000, 6000);
|