Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Svetophor</title>
</head>
<body>
	<style>
		.wrapper{
			background:#333;
			width: 150px;
			height: 440px;
			border-radius: 10px;
			font-size: 70px;
			text-align:center;
			padding: 1px 0;
			border: 6px solid #000;
			margin: auto;

		}

		.wrapper2 {
			background:#333;
			width: 150px;
			height: 299px;
			border-radius: 10px;
			font-size: 70px;
			text-align:center;
			padding: 1px 0;
			border: 6px solid #000;
			margin: auto;
		}

		#circle1, #circle2, #circle3, #cir1, #cir2{
			background:grey;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			margin-left: 15px;
			margin-top: 20px;
			line-height: 120px;
		}

		#btn{
			border-radius: 50%;
			width: 40px;
			height: 40px;
			margin-left: 47%;
			margin-top: 15px;
			margin-bottom: 100px;
		}

		#btn:hover{
			opacity: 0.6;
		}

		p{
			margin: 60px;
		}
	</style>

	<div class="wrapper">
		<div id="circle1">
		</div>
		<div id="circle2">
		</div>
		<div id="circle3">
		</div>
	</div>
	<p></p>

	<div class="wrapper2">
		<div id="cir1">
		</div>
		<div id="cir2">
		</div>
	</div>
	<input type="submit" id="btn" value="&#9731;" />

	<script>
//----------------------------светофор

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

		function timer(elem,ms){
			let count=ms;
			let number=document.createElement('span');
			number.innerHTML=count;
			number.style.color='blue';
			elem.append(number);
			let h=setInterval(()=>{
				number.innerHTML=--count;
				if(count==0){
					clearInterval(h);
					number.remove();
				}
			},1000);
		}

		function g1(){
			timer(circle3,6);
			circle3.style.background='green';
		}

		function g2(){
			circle3.style.background='grey';
		}

		function y1(){
			timer(circle2,2);
			circle2.style.background='yellow';
		}

		function y2(){
			circle2.style.background='grey';
		}

		function r1(){
			timer(circle1,10);
			circle1.style.background='red';
		}

		function r2(){
			circle1.style.background='grey';
		}

	async function trafficLight(delayGreen,delayYellow,delayRed){
		    while (true){
				y2()
		        g1()
		        await delay(delayGreen)
		        g2()
		        y1()
		        await delay(delayYellow)
		        y2()
		       	r1()
		        await delay(delayRed)
		        r2()
		        y1()
		        await delay(delayYellow)
		    }
		}

		(async()=>{
			await trafficLight(6000,2000,10000);
		})();

//----------------------domEventPromise
		async function domEventPromise(knopka,event){
			return new Promise((resolve,reject)=>{
				try{
					knopka.addEventListener(event,async(e)=>{
						resolve(e);
						knopka.removeEventListener(event,this);
					})
				}catch(e){
					reject(e);
				}	
			})
		}
		//domEventPromise(btn, 'click').then(e => console.log('event click happens', e));

//--------------PedestrianTrafficLight	
		async function PedestrianTrafficLight(){
			while(true){
				cir1.style.backgroundColor = 'red';
				await Promise.race([
            		domEventPromise(btn, 'click').then(async (e) => {
                		cir1.style.backgroundColor = 'grey';
                		
                		cir2.style.backgroundColor = 'green';
                		timer(cir2,4);
                		await delay(4000);
               			cir2.style.backgroundColor = 'grey';
                		cir1.style.backgroundColor = 'red';
                		timer(cir1,7);

            		}, err => console.log(err))
       	 		]);
        		await delay(7000);
			}
		}

		(async () => await PedestrianTrafficLight())();


//-----------speedTest
		async function speedTest(getPromise, count, parallel=1){
			let duration, querySpeed, queryDuration, parallelSpeed, parallelDuration;
			let start = performance.now();  
    		let arr = [];
   			await (async () => {
        		for (let i=0;i<count;i++) {
            	let arrPromise = []
            	for (let j=0;j<parallel;j++) {
                	arrPromise.push(getPromise);
            	}
            	let querySpeedItemStar=performance.now();
            	await Promise.all([...arrPromise.map(item => item())]);
            	arr.push(performance.now()-querySpeedItemStart);
        		}
    		})()

   			duration = Math.round(performance.now() - start);
    		querySpeed = (count*parallel)/100000;
    		queryDuration = arr.reduce((a,b)=>(a+b))/arr.length;
    		parallelSpeed = duration/(count*parallel)/10000;
    		parallelDuration = duration/(count*parallel);

			return{
				duration,
				querySpeed,
				queryDuration,
				parallelSpeed,
				parallelDuration
			}
		}

		speedTest(()=>delay(1000),10,10).then(result=>console.log(result));

		speedTest(()=>fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5)

	</script>
		
</body>
</html>