|
|
@@ -0,0 +1,254 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ #lights,
|
|
|
+ #ptl {
|
|
|
+ width: 200px;
|
|
|
+ background-color: black;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #green {
|
|
|
+ background-color: green;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #yellow {
|
|
|
+ background-color: yellow;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #red {
|
|
|
+ background-color: red;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #white {
|
|
|
+ background-color: green;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #pink {
|
|
|
+ background-color: pink;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #blue {
|
|
|
+ background-color: blue;
|
|
|
+ visibility: hidden;
|
|
|
+ } */
|
|
|
+ #green_ptl {
|
|
|
+ background-color: green;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #red_ptl {
|
|
|
+ background-color: red;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box_btn_lights,
|
|
|
+ .box_btn_ptl {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ height: 30px;
|
|
|
+ /* width: 60px; */
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="lights">
|
|
|
+ <span id="green"></span>
|
|
|
+ <span id="yellow"></span>
|
|
|
+ <span id="red"></span>
|
|
|
+ <!-- <span id="pink"></span>
|
|
|
+ <span id="blue"></span>
|
|
|
+ <span id="white"></span> -->
|
|
|
+ </div>
|
|
|
+ <div class="box_btn_lights">
|
|
|
+ <button class="knopka">domEventPromise</button>
|
|
|
+ </div>
|
|
|
+ <div id="ptl">
|
|
|
+ <span id="green_ptl"></span>
|
|
|
+ <span id="red_ptl"></span>
|
|
|
+ </div>
|
|
|
+ <div class="box_btn_ptl">
|
|
|
+ <button class="knopka_ptl">GO</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <button id='button'>click here</button> -->
|
|
|
+ <script>
|
|
|
+ let greenL = document.getElementById('green')
|
|
|
+ let yellowL = document.getElementById('yellow')
|
|
|
+ let redL = document.getElementById('red')
|
|
|
+ // let pinkL = document.getElementById('pink')
|
|
|
+ // let blueL = document.getElementById('blue')
|
|
|
+ // let whiteL = document.getElementById('white')
|
|
|
+ // let button = document.getElementById('button')
|
|
|
+ let greenPTL = document.getElementById('green_ptl')
|
|
|
+ let redPTL = document.getElementById('red_ptl')
|
|
|
+
|
|
|
+ let knopka = document.querySelector('.knopka')
|
|
|
+ let knopkaPTL = document.querySelector('.knopka_ptl')
|
|
|
+
|
|
|
+ const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+ // trafficLight && Stage 2
|
|
|
+
|
|
|
+ function timer(item, ms) {
|
|
|
+ for (let j = 0; j <= (+`${(ms/1000)}`); j++) {
|
|
|
+ setTimeout(() => (j == (+`${(ms/1000)}`)) ? console.log("поехали") : item
|
|
|
+ .innerText = (+`${(ms/1000)}`) - j, `${j * 1000}`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function trafficLight(...args) {
|
|
|
+ //debugger
|
|
|
+ while (true) {
|
|
|
+ for (i in args) {
|
|
|
+ args[i].style.visibility = 'visible';
|
|
|
+ timer(args[i], 3000)
|
|
|
+ await delay(3000)
|
|
|
+ args[i].style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ trafficLight(greenL, yellowL, redL) //, pinkL, blueL, whiteL
|
|
|
+
|
|
|
+ // async function trafficLight() {
|
|
|
+ // while (true) {
|
|
|
+ // greenL.style.visibility = 'visible' //включаем зеленый
|
|
|
+ // await delay(3000) //время зеленого
|
|
|
+ // greenL.style.visibility = 'hidden'
|
|
|
+ // yellowL.style.visibility = 'visible'
|
|
|
+ // await delay(3000) //время желтого
|
|
|
+ // yellowL.style.visibility = 'hidden'
|
|
|
+ // redL.style.visibility = 'visible'
|
|
|
+ // await delay(3000) //время красного
|
|
|
+ // redL.style.visibility = 'hidden'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // trafficLight()
|
|
|
+
|
|
|
+
|
|
|
+ //-------------------domEventPromise--------------------
|
|
|
+ function domEventPromise(domElem, eventName) {
|
|
|
+ return new Promise((resolve, reject) => { // executor
|
|
|
+ domElem.addEventListener(eventName, f);
|
|
|
+
|
|
|
+ function f() {
|
|
|
+ console.log('hi');
|
|
|
+ resolve(event); //резолвим нашу кнопку
|
|
|
+ domElem.removeEventListener(eventName, f);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // console.log(domEventPromise(knopka, 'click'))
|
|
|
+ domEventPromise(knopka, 'click').then(e => console.log('event click happens', e)); //e -
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //PedestrianTrafficLight
|
|
|
+ async function PedestrianTrafficLight(green, red) {
|
|
|
+ while (true) {
|
|
|
+ green.style.visibility = 'visible';
|
|
|
+ timer(green, 5000);
|
|
|
+ await delay(5000);
|
|
|
+ green.style.visibility = 'hidden';
|
|
|
+ red.style.visibility = 'visible';
|
|
|
+ timer(red, 5000);
|
|
|
+ let user = await Promise.race(
|
|
|
+ [domEventPromise(knopkaPTL, 'click'),
|
|
|
+ delay(5000)]);
|
|
|
+ if(user == event) {
|
|
|
+ console.log('event click happens', event)
|
|
|
+ await delay(2000);
|
|
|
+ }
|
|
|
+ red.style.visibility = 'hidden';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ PedestrianTrafficLight(greenPTL, redPTL); //, pinkL, blueL, whiteL
|
|
|
+
|
|
|
+
|
|
|
+ //speedtest
|
|
|
+ const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+ async function speedtest(getPromise, count, parallel = 1) {
|
|
|
+ let querySpeed = 0;
|
|
|
+ let queryDuration = 0;
|
|
|
+ let parallelDuration = 0;
|
|
|
+ let parallelSpeed = 0;
|
|
|
+ let StartTime = performance.now()
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ let PromiseArr = []
|
|
|
+ for (let j = 0; j < parallel; j++) {
|
|
|
+ //let count;
|
|
|
+ PromiseArr.push(getPromise())
|
|
|
+ }
|
|
|
+ await Promise.all(PromiseArr);
|
|
|
+ console.log(PromiseArr)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let stopTime = performance.now()
|
|
|
+ duration = stopTime - StartTime
|
|
|
+ parallelDuration = duration / (count * parallel)
|
|
|
+ parallelSpeed = 1 / parallelDuration
|
|
|
+ queryDuration = duration / count
|
|
|
+ querySpeed = 1 / queryDuration //count / duration
|
|
|
+
|
|
|
+
|
|
|
+ console.log('duration: ' + duration)
|
|
|
+ console.log('queryDuration: ' + queryDuration)
|
|
|
+ console.log('querySpeed: ' + querySpeed)
|
|
|
+ console.log('parallelDuration: ' + parallelDuration)
|
|
|
+ console.log('parallelSpeed: ' + parallelSpeed)
|
|
|
+ console.log()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ duration,
|
|
|
+ querySpeed, //средняя скорость одного запроса
|
|
|
+ queryDuration, //
|
|
|
+ parallelSpeed,
|
|
|
+ parallelDuration
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ speedtest(() => delay(1000), 10, 10).then(result => console.log(result))
|
|
|
+ // {duration: 10000,
|
|
|
+ // querySpeed: 0.001, //1 тысячная запроса за миллисекунду 1/1000
|
|
|
+ // 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)
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
