script.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. //Async/Await Homework 2
  2. const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
  3. //Используя асинхронную функцию и бесконечный цикл, просимулируйте светофор:
  4. /* async function trafficLight(){
  5. while (true){
  6. document.querySelector('.green').style.backgroundColor = 'green';
  7. document.querySelector('.red').style.backgroundColor = '';
  8. await delay(3000);
  9. document.querySelector('.green').style.backgroundColor = '';
  10. document.querySelector('.yellow').style.backgroundColor = 'yellow';
  11. await delay(500)
  12. document.querySelector('.yellow').style.backgroundColor = '';
  13. document.querySelector('.red').style.backgroundColor = 'red';
  14. await delay(2000)
  15. }
  16. }
  17. trafficLight(); */
  18. //Stage 2
  19. //Сделайте trafficLight более универсальной - добавьте в параметры DOM-элемент для отображения,
  20. //а так же время работы каждого цвета
  21. async function trafficLight(rootElClass, greenDelay, redDelay, yellowDelay){
  22. let root = document.querySelector(rootElClass);
  23. for (let i = 0; i <3; i++){
  24. let div = document.createElement('div');
  25. div.style.backgroundColor = 'black';
  26. root.append(div);
  27. }
  28. while (true){
  29. root.children[0].style.backgroundColor = 'green';
  30. root.children[2].style.backgroundColor = '';
  31. await delay(greenDelay);
  32. root.children[1].style.backgroundColor = 'yellow';
  33. root.children[0].style.backgroundColor = '';
  34. await delay(redDelay)
  35. root.children[2].style.backgroundColor = 'red';
  36. root.children[1].style.backgroundColor = '';
  37. await delay(yellowDelay)
  38. }
  39. }
  40. trafficLight('.wrapper', 1000, 800, 2000);
  41. // domEventPromise
  42. // Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:
  43. // domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
  44. // Функция должна:
  45. // используя addEventListener повесить свой обработчик события на DOM element событие eventName
  46. // по событию зарезолвить промис отдав в качестве результата объект события
  47. // убрать обработчик с DOM-элемента, используя removeEventListener
  48. function domEventPromise(element, eventName){
  49. return new Promise(function (resolve, reject){
  50. const resolver = (e) => {
  51. resolve(e.target)
  52. removeEventListener(eventName, resolver);
  53. };
  54. element.addEventListener(eventName, resolver);
  55. })
  56. }
  57. //domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
  58. // PedestrianTrafficLight
  59. // Напишите упрощенный светофор для пешеходов
  60. // async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
  61. // let root = document.querySelector(rootElClass);
  62. // for (let i = 0; i < 2; i++){
  63. // let div = document.createElement('div');
  64. // div.style.backgroundColor = 'black';
  65. // root.append(div);
  66. // }
  67. // while (true){
  68. // root.children[0].style.backgroundColor = 'green';
  69. // root.children[1].style.backgroundColor = '';
  70. // await delay(greenDelay);
  71. // root.children[1].style.backgroundColor = 'red';
  72. // root.children[0].style.backgroundColor = '';
  73. // await delay(redDelay)
  74. // }
  75. // }
  76. // PedestrianTrafficLight('.wrapper1', 3000,2500);
  77. // Stage 2
  78. // Используя Promise.race, domEventPromise и кнопку в DOM сделайте пешеходный светофор с кнопкой, который так же переключается по времени периодически.
  79. // async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
  80. // let root = document.querySelector(rootElClass);
  81. // for (let i = 0; i < 2; i++){
  82. // let div = document.createElement('div');
  83. // div.style.backgroundColor = 'black';
  84. // root.append(div);
  85. // }
  86. // while (true){
  87. // root.children[0].style.backgroundColor = 'green';
  88. // root.children[1].style.backgroundColor = '';
  89. // await delay(greenDelay);
  90. // root.children[1].style.backgroundColor = 'red';
  91. // root.children[0].style.backgroundColor = '';
  92. // await Promise.race([delay(redDelay), domEventPromise(knopka, 'click')]);
  93. // }
  94. // }
  95. // PedestrianTrafficLight('.wrapper1', 2000, 4500);
  96. // Stage 3
  97. // Не давайте возможности пешеходам сильно наглеть - предусмотрите задержку, после которой будет работать кнопка.
  98. async function PedestrianTrafficLight(rootElClass, greenDelay, redDelay){
  99. let root = document.querySelector(rootElClass);
  100. for (let i = 0; i < 2; i++){
  101. let div = document.createElement('div');
  102. div.style.backgroundColor = 'black';
  103. root.append(div);
  104. }
  105. let buttonResolver = (knopka) => new Promise(() => {
  106. setTimeout(() => {
  107. // console.log('start');
  108. knopka.disabled = ""}, 10000);
  109. }, () => reject)
  110. while (true){
  111. root.children[0].style.backgroundColor = 'green';
  112. root.children[1].style.backgroundColor = '';
  113. await Promise.race([delay(greenDelay), buttonResolver(knopka)]);
  114. root.children[1].style.backgroundColor = 'red';
  115. root.children[0].style.backgroundColor = '';
  116. await Promise.race([delay(redDelay), domEventPromise(knopka, 'click')]).then( e => {
  117. e.disabled = 'true';
  118. });
  119. }
  120. }
  121. PedestrianTrafficLight('.wrapper1', 2000, 4500);
  122. // speedtest
  123. // Написать асинхронную функцию
  124. // где:
  125. // count - количество повторов
  126. // parallel - количество одновременных запросов/промисов в одном повторе
  127. // getPromise - функция, которая умеет вернуть нужный Вам промис для тестирования скорости его работы
  128. // которая будет в цикле count раз создавать parallel промисов с помощью переданной функции getPromise, дожидаться выполнения всех parallel промисов, после чего цикл повторяется.
  129. // Замерить время общее время выполнения, и вычислить:
  130. // duration, общую длительность работы цикла
  131. // parallelDuration, среднее время обработки запроса параллельно (за какое время исполнилось parallel*count промисов),
  132. // paralledSpeed, скорость в запросах в миллисекунду
  133. // queryDuration, реальное среднее время запроса (отталкиваясь от count и времени работы цикла).
  134. // querySpeed, реальное средняя скорость запроса
  135. // Эти переменные вернуть в одном объекте-результате (см. заготовку выше)
  136. // Для отладки попробуйте на delay (пример выше есть, реальное время будет отличаться на единицы-десятки миллисекунд). Потом можете попробовать на swapi.dev. Не создавайте чрезмерно много параллельных запросов.
  137. async function speedtest(getPromise, count, parallel = 1){
  138. let duration = performance.now()
  139. let initParallel = parallel;
  140. let promisArray = [];
  141. for(let i = 0; i < count; i++) {
  142. promisArray[i] = getPromise();
  143. parallel -= 1
  144. await Promise.all(promisArray)
  145. }
  146. console.log(promisArray);
  147. duration = performance.now() - duration
  148. console.log(duration)
  149. console.log((initParallel * count))
  150. return {
  151. duration: duration,
  152. querySpeed: count / duration,
  153. queryDuration: duration / count,
  154. parallelSpeed: count/ duration * initParallel,
  155. parallelDuration: duration /(initParallel * count)
  156. }
  157. }
  158. speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
  159. // {duration: 10000,
  160. // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
  161. // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем
  162. // parallelSpeed: 0.01 // 100 запросов за 10000 миллисекунд
  163. // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
  164. speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 1, 2)