Browse Source

i have questions about button on pedestrian light and speed test(need more information how it works and where it works)

kurkabein 2 years ago
parent
commit
022d29f587
2 changed files with 99 additions and 9 deletions
  1. 1 1
      traffic_light_homework/index.html
  2. 98 8
      traffic_light_homework/main.js

+ 1 - 1
traffic_light_homework/index.html

@@ -20,7 +20,7 @@
         <div id="yellow" class="round"></div>
         <div id="green" class="round"></div>
  -->    </div>
-    
+    <button id="knopka">Clik me</button>
     <script src="main.js"></script>
 </body>
 </html>

+ 98 - 8
traffic_light_homework/main.js

@@ -19,16 +19,16 @@ function red(){
 
 
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
 
 
+/* 
 
 
 
-const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
-
-async function trafficLight(parent){
-    /* let parent = document.getElementById('trafficlight'); */
+async function trafficLight(parent,greenTime,yellowTime,redTime){
+   
     for(let i=0; i<3;i++){
         let div = document.createElement('div')
         div.classList = 'round';
@@ -38,16 +38,106 @@ async function trafficLight(parent){
        // включаем зеленый
         parent.children[0].style.backgroundColor = 'green';
         parent.children[2].style.backgroundColor = '';
-        await delay(4000)
+        await delay(greenTime)
        // включаем желтый
        parent.children[0].style.backgroundColor = '';
        parent.children[1].style.backgroundColor = 'yellow';
-        await delay(3000)
+        await delay(yellowTime)
        // включаем красный
        parent.children[1].style.backgroundColor = '';
        parent.children[2].style.backgroundColor = 'red';
-        await delay(4000)
+        await delay(redTime)
+    }
+}
+
+trafficLight(trafficlight,4000,3000,4000); */
+
+
+function domEventPromise(parent,action){
+    return new Promise((resolved,reject) =>{
+        function clicked(event){
+            resolved(event,
+            console.log(event))
+            parent.removeEventListener(action,clicked);
+    }
+        parent.addEventListener(action, clicked)} 
+        
+        )
+
+ /*       const result = (event) => {
+           console.log(event.detail)
+        resolved(event.target)
+        parent.removeEventListener(action,result);
+    }
+    parent.addEventListener(action,result);
+    }) */
+}
+
+domEventPromise(knopka,'click').then((e) => console.log('event click happens', e));
+
+//pedestrian light
+
+
+async function pedestrianLight(parent,btn,greenTime,redTime){
+   
+    for(let i=0; i<2;i++){
+        let div = document.createElement('div')
+        div.classList = 'round';
+        parent.append(div);
+    }
+   /*  let btnRes = (btn) => new Promise((resolved,reject)=>{
+            console.log(`i'm disabled`);
+            resolved(setTimeout(btn.disabled = true, 10000))
+    }) */
+
+    let buttonResolver = (knopka) => new Promise(() => {
+        setTimeout(() => {
+           // console.log('start');
+            knopka.disabled = ""}, 10000);
+        }, () => reject)
+
+    while (true){
+       // включаем зеленый
+        parent.children[0].style.backgroundColor = 'green';
+        parent.children[1].style.backgroundColor = '';
+        await /* delay(greenTime) */ Promise.race([delay(greenTime),buttonResolver(btn)])
+       // включаем красный
+       parent.children[0].style.backgroundColor = '';
+       parent.children[1].style.backgroundColor = 'red';
+        await /* delay(redTime) */  Promise.race([delay(redTime),domEventPromise(knopka,'click')])
     }
 }
 
-trafficLight(trafficlight);
+
+pedestrianLight(trafficlight,knopka,15000,10000)
+
+
+
+async function speedtest(getPromise, count,parallel=1){
+    let duration = performance.now();
+    let initedParalel = parallel;
+    let promiseArr = [];
+    for(let i = 0; i < count; i++){
+        promiseArr[i] = getPromise();
+        parallel-=1;
+        await Promise.all(promiseArr);
+    }
+    console.log(promiseArr);
+    duration = performance.now() - duration
+    console.log(initedParalel*count);
+        return {
+            duration:duration,
+            querySpeed: count/duration, //средняя скорость одного запроса
+            queryDuration:duration/count, //
+            parallelSpeed: count/duration*initedParalel,
+            parallelDuration: duration/(initedParalel*count)
+        }
+    }
+    
+    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()), 1, 2) */