index.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. // trafficLightWrapp()
  2. function trafficLightWrapp() {
  3. const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
  4. async function trafficLight(parent, redTime, yellowTime, greenTime) {
  5. const wrapp = document.createElement('div')
  6. wrapp.style.width = 'max-content'
  7. wrapp.style.padding = '10px'
  8. wrapp.style.backgroundColor = '#333'
  9. const cell = document.createElement('div')
  10. cell.style.margin = '3px'
  11. cell.style.height = '100px'
  12. cell.style.width = '100px'
  13. cell.style.backgroundColor = '#999'
  14. cell.style.borderRadius = '50%'
  15. const red = cell.cloneNode(true)
  16. const yellow = cell.cloneNode(true)
  17. const green = cell.cloneNode(true)
  18. wrapp.append(red)
  19. wrapp.append(yellow)
  20. wrapp.append(green)
  21. parent.append(wrapp)
  22. turnOn = (cell, color) => {
  23. cell.style.backgroundColor = color
  24. }
  25. turnOff = (cell) => {
  26. cell.style.backgroundColor = '#999'
  27. }
  28. while (true) {
  29. turnOn(green, 'green')
  30. await delay(greenTime)
  31. turnOff(green)
  32. turnOn(yellow, 'yellow')
  33. await delay(yellowTime)
  34. turnOff(yellow)
  35. turnOn(red, 'red')
  36. await delay(redTime)
  37. turnOn(yellow, 'yellow')
  38. await delay(yellowTime)
  39. turnOff(yellow)
  40. turnOff(red)
  41. }
  42. }
  43. trafficLight(container1, 3000, 1000, 3000)
  44. }
  45. // domEventPromiseWrapp()
  46. function domEventPromiseWrapp() {
  47. const knopka = document.createElement('button')
  48. knopka.innerText = 'Кликай'
  49. container1.append(knopka)
  50. function domEventPromise(element, eventName) {
  51. return new Promise(function(resolve, reject) {
  52. let listener = function (event) {
  53. element.removeEventListener(eventName, listener)
  54. resolve(event)
  55. }
  56. element.addEventListener(eventName, listener)
  57. })
  58. }
  59. domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
  60. }
  61. pedestrianTrafficLightWrapp()
  62. function pedestrianTrafficLightWrapp() {
  63. const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
  64. async function trafficLight2(parent, redTime, greenTime) {
  65. const wrapp = document.createElement('div')
  66. wrapp.style.width = 'max-content'
  67. wrapp.style.padding = '10px'
  68. wrapp.style.backgroundColor = '#333'
  69. const cell = document.createElement('div')
  70. cell.style.margin = '3px'
  71. cell.style.height = '100px'
  72. cell.style.width = '100px'
  73. cell.style.backgroundColor = '#999'
  74. cell.style.borderRadius = '50%'
  75. const red = cell.cloneNode(true)
  76. const green = cell.cloneNode(true)
  77. wrapp.append(red)
  78. wrapp.append(green)
  79. parent.append(wrapp)
  80. turnOn = (cell, color) => {
  81. cell.style.backgroundColor = color
  82. }
  83. turnOff = (cell) => {
  84. cell.style.backgroundColor = '#999'
  85. }
  86. const knopka = document.createElement('button')
  87. knopka.innerText = 'ВКЛЮЧИТЬ ЗЕЛЕНЫЙ'
  88. container1.append(knopka)
  89. function domEventPromise(element, eventName) {
  90. return new Promise(function(resolve, reject) {
  91. let listener = function (event) {
  92. element.removeEventListener(eventName, listener)
  93. element.setAttribute("disabled", "disabled")
  94. delay(4000).then(() => element.removeAttribute("disabled", "disabled"))
  95. resolve(event)
  96. }
  97. element.addEventListener(eventName, listener)
  98. })
  99. }
  100. while (true) {
  101. turnOn(green, 'green')
  102. await delay(greenTime)
  103. turnOff(green)
  104. turnOn(red, 'red')
  105. await Promise.race([domEventPromise(knopka, 'click'), delay(redTime)])
  106. turnOff(red)
  107. }
  108. }
  109. trafficLight2(container1, 3000, 3000)
  110. }
  111. // speedTestWrapp()
  112. function speedTestWrapp() {
  113. const gql = (url, query, variables) => fetch(url, {
  114. method: 'POST',
  115. headers: {'content-type': 'application/json'},
  116. body: JSON.stringify({query, variables}),
  117. });
  118. (async function() {
  119. let response = await gql("http://shop-roles.asmer.fs.a-level.com.ua/graphql", `query cats($q:String) {
  120. CategoryFind(query:$q){
  121. name goods{
  122. name images{
  123. url
  124. }
  125. }
  126. }
  127. }`, {q: "[{}]"});
  128. let result = await response.json();
  129. })()
  130. async function speedtest(getPromise, count,parallel=1){
  131. return {
  132. duration,
  133. querySpeed, //средняя скорость одного запроса
  134. queryDuration, //
  135. parallelSpeed,
  136. parallelDuration
  137. }
  138. }
  139. speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
  140. // {duration: 10000,
  141. // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
  142. // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем
  143. // parallelSpeed: 0.01 // 100 запросов за 10000 миллисекунд
  144. // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
  145. speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5)
  146. }