homework-js/js15/js/main.js

// Async/Await Homework 2
// TrafficLight

const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

let green = document.querySelector('#green')
let yellow = document.querySelector('#yellow')
let red = document.querySelector('#red')

async function trafficLight() {
    while (true) {
        greenPlay()
        await delay(8000)
        yellowPlay()
        await delay(3000)
        redPlay()
        await delay(8000)
        yellowPlay()
        await delay(3000)
    }
}

function greenPlay() {
    remove()
    green.style.background = 'green'
}
function yellowPlay() {
    remove()
    yellow.style.background = 'yellow'
}
function redPlay() {
    remove()
    red.style.background = 'red'
}

function remove() {
    green.style.background = ''
    yellow.style.background = ''
    red.style.background = ''
}

trafficLight()

// or
// находим все классы
// let circle = document.getElementsByClassName('circle')
// // функция - счётчик counter
// function counter(setCounterOne, setCounterTwo, classIndex0, classIndex1, classIndex2) {
// 	// выводим счётчик
// 	let timeoutId = setInterval(function () { 
// 		classIndex0.classList.add('circleBGColor1')
// 		classIndex1.innerHTML = setCounterOne;
// 		classIndex1.classList.add('circleColor1')
// 		// очищаем счетчик и добавляем класс(желтый)
// 		if(setCounterOne <= 3) {
// 			classIndex1.innerHTML = ''
// 			classIndex1.classList.add('circleBGColor2')
//             // мигание
//             setTimeout(function() {
//                 classIndex0.classList.remove('circleBGColor1')
//             }, 500)
// 		}
// 		setCounterOne--
// 		// при достижении нуля останавливаем таймер и удаляем клас(желтый и красный)
// 		if (setCounterOne == 0) {
// 			clearInterval(timeoutId)
// 			classIndex1.classList.remove('circleBGColor2', 'circleColor1')
// 			classIndex0.classList.remove('circleBGColor1')
// 			let timeId = setInterval(function() {
// 				// добавляем класс(зелёный)
// 				classIndex2.classList.add('circleBGColor3')
// 				classIndex1.innerHTML = setCounterTwo
// 				classIndex1.classList.add('circleColor2')
// 				// добавляем второй счётчик
// 				if(setCounterTwo <= 3) {
//                     classIndex1.innerHTML = ''
// 			        classIndex1.classList.add('circleBGColor2')
// 					// мигание
// 					setTimeout(function() {
// 						classIndex2.classList.remove('circleBGColor3')
// 					}, 500)
// 				}
//                 // при достижении нуля останавливаем таймер и удаляем клас(желтый и зеленый)
//                 if (setCounterTwo == 0) {
//                     clearInterval(timeoutId)
//                     classIndex1.classList.remove('circleBGColor2', 'circleColor3')
//                     classIndex2.classList.remove('circleBGColor3')
//                 }
//                 // подготовка счётчика к новому циклу
//                 if(setCounterTwo == 0) {
// 					clearInterval(timeId)
// 					classIndex1.classList.remove('circleColor2')
// 				}
// 				setCounterTwo--
// 			}, 1000)
// 		}
// 	},1000)
// }

// // функция - подсчет таймаутов
// let totalCounter;
// function sumTimeout(counterOne, counterTwo) {
// 	let sumCounterOne = counterOne * 1000
// 	let sumCounterTwo = counterTwo * 1000
// 	totalCounter = (sumCounterOne + sumCounterTwo) + 1000
// 	return totalCounter
// }

// // рекурсия setTimeout
// setTimeout(function restartCounter() {
// 	// счётчик
// 	let addCounterOne = 8
// 	let addCounterTwo = 8
// 	// вызов подсчет таймаутов
// 	sumTimeout(addCounterOne, addCounterTwo)
// 	// вызов светофора counter( первый счётчик , второй счётчик, класс с индексом [0], класс с индексом [1], класс с индексом [2])
// 	counter(addCounterOne, addCounterTwo, circle[0], circle[1], circle[2])
// 	setTimeout(restartCounter, totalCounter)
// },100)

// domEventPromise

// const domEventPromise = function (element, eventName) {
//     return new Promise(function(resolve, reject) {
//         let func
//         element.addEventListener(eventName, func = (event) => {
//             resolve(event)
//             element.removeEventListener(eventName, func)
//         })
//     })
// }

// PedestrianTrafficLight

// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

// let red = document.querySelector('#red')
// let green = document.querySelector('#green')
// let btn = document.querySelector('#btn')

// async function PedestrianTrafficLight() {
//     while (true) {
//         redPlay()
//         await Promise.race([delay(8000), domEventPromise(btn,'click')])
//         greenPlay()
//         await delay(8000)
//     }
// }

// function redPlay() {
//     remove()
//     red.style.background = 'red'
// }

// function greenPlay() {
//     remove()
//     green.style.background = 'green'
// }

// function remove() {
//     red.style.background = ''
//     green.style.background = ''
// }

// PedestrianTrafficLight()
// btn.addEventListener('click', btnClick)

// async function btnClick() {
//     btn.disabled = true
//     await delay(12000)
//     btn.disabled = false
// }

// // // or
// // находим все классы
// let round = document.getElementsByClassName('round')
// // функция - счётчик counter
// function counter(setCountOne, setCountTwo, Index0, Index1) {
//     // выводим счётчик
// 	let timeoutId = setInterval(function() { 
// 		Index0.classList.add('roundBGColor1')
//         Index0.innerHTML = setCountOne
//         Index0.classList.add('roundColor1')
//         if(setCountOne <= 3) {
//             // мигание
//             setTimeout(function() {
//                 Index0.innerHTML = ''
//                 Index0.classList.remove('roundBGColor1')
//             }, 500)
//         }
//         setCountOne--
// 		// при достижении нуля останавливаем таймер и удаляем класс (красный)
// 		if (setCountOne == 0) {
// 			clearInterval(timeoutId)
// 			Index0.classList.remove('roundBGColor1')
// 			let timeId = setInterval(function() {
//                 Index1.innerHTML = setCountTwo
//                 Index1.classList.add('roundColor2')
// 				// добавляем класс(зелёный)
// 				Index1.classList.add('roundBGColor3')
// 				// добавляем второй счётчик
// 				if(setCountTwo <= 3) {
//                         // мигание
//                         setTimeout(function() {
//                             Index1.classList.remove('roundBGColor3')
//                         }, 500)
// 				}
//                 // при достижении нуля останавливаем таймер и удаляем класc (зеленый)
//                 if (setCountTwo == 0) {
//                     Index1.innerHTML = ''
//                     clearInterval(timeoutId)
//                     Index1.classList.remove('roundBGColor3')
//                 }
//                 // подготовка счётчика к новому циклу
//                 if(setCountTwo == 0) {
// 					clearInterval(timeId)
// 				}
// 				setCountTwo--
// 			}, 1000)
// 		}
// 	},1000)
// }

// let totalCounter
// function sumTimeout(countOne, countTwo) {
// 	let sumCountOne = countOne * 1000
// 	let sumCountTwo = countTwo * 1000
// 	totalCounter = (sumCountOne + sumCountTwo) + 1000
// 	return totalCounter
// }

// setTimeout(function restartCounter() {
// 	let addCountOne = 8
// 	let addCountTwo = 8
// 	sumTimeout(addCountOne, addCountTwo)
// 	counter(addCountOne, addCountTwo, round[0], round[1])
// 	setTimeout(restartCounter, totalCounter)
// },100)

// function Dis(el,tm) {
//   el.disabled = true
//   Dis.obj = el
//   setTimeout('Dis.obj.disabled = false;', tm * 1000)
// }
// смену цвета по нажатию кнопки долго думала как реализовать, но пока еще в процессе - решила сдать уже так

// speedtest

// async function speedtest(getPromise, count, parallel = 1) {

//     let t1 = performance.now()
//     for (let i = 0; i < count; i++) {
//         let arrPromise = []

//         for (let j = 0; j < parallel; j++) {
//             arrPromise.push(getPromise())
//         }

//         await Promise.all(arrPromise)
//     }

//     let t2 = performance.now()
//     let duration = t2 - t1
//     let querySpeed = count / duration
//     let queryDuration = duration / count
//     let parallelSpeed = (count * parallel) / duration
//     let parallelDuration = duration / (count * parallel)

//     return {
//         duration,
//         querySpeed, //средняя скорость одного запроса
//         queryDuration, //
//         parallelSpeed,
//         parallelDuration
//     }
// }

// speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
// // {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)

//проверяла результат работы раскомментируя по одному блоку кода с заданием js/html