|
|
@@ -1,24 +1,182 @@
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
|
|
|
-}
|
|
|
+// trafficLightWrapp()
|
|
|
+function trafficLightWrapp() {
|
|
|
+
|
|
|
+ const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+ async function trafficLight(parent, redTime, yellowTime, greenTime) {
|
|
|
+ const wrapp = document.createElement('div')
|
|
|
+ wrapp.style.width = 'max-content'
|
|
|
+ wrapp.style.padding = '10px'
|
|
|
+ wrapp.style.backgroundColor = '#333'
|
|
|
+ const cell = document.createElement('div')
|
|
|
+ cell.style.margin = '3px'
|
|
|
+ cell.style.height = '100px'
|
|
|
+ cell.style.width = '100px'
|
|
|
+ cell.style.backgroundColor = '#999'
|
|
|
+ cell.style.borderRadius = '50%'
|
|
|
+ const red = cell.cloneNode(true)
|
|
|
+ const yellow = cell.cloneNode(true)
|
|
|
+ const green = cell.cloneNode(true)
|
|
|
+ wrapp.append(red)
|
|
|
+ wrapp.append(yellow)
|
|
|
+ wrapp.append(green)
|
|
|
+ parent.append(wrapp)
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
+ turnOn = (cell, color) => {
|
|
|
+ cell.style.backgroundColor = color
|
|
|
+ }
|
|
|
|
|
|
+ turnOff = (cell) => {
|
|
|
+ cell.style.backgroundColor = '#999'
|
|
|
+ }
|
|
|
+
|
|
|
+ while (true) {
|
|
|
+ turnOn(green, 'green')
|
|
|
+ await delay(greenTime)
|
|
|
+ turnOff(green)
|
|
|
+ turnOn(yellow, 'yellow')
|
|
|
+ await delay(yellowTime)
|
|
|
+ turnOff(yellow)
|
|
|
+ turnOn(red, 'red')
|
|
|
+ await delay(redTime)
|
|
|
+ turnOn(yellow, 'yellow')
|
|
|
+ await delay(yellowTime)
|
|
|
+ turnOff(yellow)
|
|
|
+ turnOff(red)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ trafficLight(container1, 3000, 1000, 3000)
|
|
|
}
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
|
|
|
+
|
|
|
+// domEventPromiseWrapp()
|
|
|
+function domEventPromiseWrapp() {
|
|
|
+
|
|
|
+ const knopka = document.createElement('button')
|
|
|
+ knopka.innerText = 'Кликай'
|
|
|
+ container1.append(knopka)
|
|
|
+
|
|
|
+ function domEventPromise(element, eventName) {
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ let listener = function (event) {
|
|
|
+ element.removeEventListener(eventName, listener)
|
|
|
+ resolve(event)
|
|
|
+ }
|
|
|
+ element.addEventListener(eventName, listener)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
|
|
|
}
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
+
|
|
|
+
|
|
|
+pedestrianTrafficLightWrapp()
|
|
|
+function pedestrianTrafficLightWrapp() {
|
|
|
+
|
|
|
+ const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+ async function trafficLight2(parent, redTime, greenTime) {
|
|
|
+ const wrapp = document.createElement('div')
|
|
|
+ wrapp.style.width = 'max-content'
|
|
|
+ wrapp.style.padding = '10px'
|
|
|
+ wrapp.style.backgroundColor = '#333'
|
|
|
+ const cell = document.createElement('div')
|
|
|
+ cell.style.margin = '3px'
|
|
|
+ cell.style.height = '100px'
|
|
|
+ cell.style.width = '100px'
|
|
|
+ cell.style.backgroundColor = '#999'
|
|
|
+ cell.style.borderRadius = '50%'
|
|
|
+ const red = cell.cloneNode(true)
|
|
|
+ const green = cell.cloneNode(true)
|
|
|
+ wrapp.append(red)
|
|
|
+ wrapp.append(green)
|
|
|
+ parent.append(wrapp)
|
|
|
+
|
|
|
+ turnOn = (cell, color) => {
|
|
|
+ cell.style.backgroundColor = color
|
|
|
+ }
|
|
|
+
|
|
|
+ turnOff = (cell) => {
|
|
|
+ cell.style.backgroundColor = '#999'
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const knopka = document.createElement('button')
|
|
|
+ knopka.innerText = 'ВКЛЮЧИТЬ ЗЕЛЕНЫЙ'
|
|
|
+ container1.append(knopka)
|
|
|
+
|
|
|
+ function domEventPromise(element, eventName) {
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ let listener = function (event) {
|
|
|
+ element.removeEventListener(eventName, listener)
|
|
|
+ element.setAttribute("disabled", "disabled")
|
|
|
+ delay(4000).then(() => element.removeAttribute("disabled", "disabled"))
|
|
|
+ resolve(event)
|
|
|
+ }
|
|
|
+ element.addEventListener(eventName, listener)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ while (true) {
|
|
|
+ turnOn(green, 'green')
|
|
|
+ await delay(greenTime)
|
|
|
+ turnOff(green)
|
|
|
+ turnOn(red, 'red')
|
|
|
+ await Promise.race([domEventPromise(knopka, 'click'), delay(redTime)])
|
|
|
+ turnOff(red)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ trafficLight2(container1, 3000, 3000)
|
|
|
|
|
|
}
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
+
|
|
|
+
|
|
|
+// speedTestWrapp()
|
|
|
+function speedTestWrapp() {
|
|
|
+
|
|
|
+
|
|
|
+ const gql = (url, query, variables) => fetch(url, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {'content-type': 'application/json'},
|
|
|
+ body: JSON.stringify({query, variables}),
|
|
|
+ });
|
|
|
+
|
|
|
+ (async function() {
|
|
|
+ let response = await gql("http://shop-roles.asmer.fs.a-level.com.ua/graphql", `query cats($q:String) {
|
|
|
+ CategoryFind(query:$q){
|
|
|
+ name goods{
|
|
|
+ name images{
|
|
|
+ url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`, {q: "[{}]"});
|
|
|
+ let result = await response.json();
|
|
|
+ })()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ async function speedtest(getPromise, count,parallel=1){
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ duration,
|
|
|
+ querySpeed, //средняя скорость одного запроса
|
|
|
+ queryDuration, //
|
|
|
+ parallelSpeed,
|
|
|
+ parallelDuration
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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()), 10, 5)
|
|
|
|
|
|
}
|
Ivar