123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- // Class Work (Telegram)
- const getGQL = url => async (query, variables) => {
- return await fetch(url, {
- method: 'POST',
- headers: {
- "Content-Type": "application/json"
- },
- body: JSON.stringify({ query, variables })
- })
- .then(res => res.json())
- .then(data => {
- if (!data.data && data.errors)
- throw new Error(JSON.stringify(data.errors))
- return data.data[Object.keys(data.data)[0]]
- })
- }
- const gql = getGQL('http://shop-roles.asmer.fs.a-level.com.ua/graphql');
- (async () => {
- let result = await gql(`query cats ($q:String) {CategoryFind(query: $q){name goods{name images{url}}}}`,{"q": "[{}]"});
- let div = document.createElement('div');
- for (const key in result) {
- let p = document.createElement('p');
- let str = '<ul>';
- for (const keys in result[key]['goods']) {
- str += `<li>${result[key]['goods'][keys]['name']}</li>`;
- }
- str += '</ul>';
- p.innerHTML = `<strong>${key}:</strong> ${result[key]['name']} ${str}`;
- div.append(p);
- }
- document.body.append(div);
- })()
- // Светофор
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
- async function trafficLight(container, delayGreen, delayYellow, delayRed){
- let green = document.createElement('div');
- let yellow = document.createElement('div');
- let red = document.createElement('div');
- green.className = 'lighter__elem';
- yellow.className = 'lighter__elem';
- red.className = 'lighter__elem';
- container.append(green, yellow, red);
- while (true){
- yellow.style.backgroundColor = '#696969FF';
- green.style.backgroundColor = '#309600';
- await delay(delayGreen)
- green.style.backgroundColor = '#696969FF';
- yellow.style.backgroundColor = '#e2e83c';
- await delay(delayYellow)
- yellow.style.backgroundColor = '#696969FF';
- red.style.backgroundColor = '#b93c00';
- await delay(delayRed)
- red.style.backgroundColor = '#696969FF';
- yellow.style.backgroundColor = '#e2e83c';
- await delay(delayYellow)
- }
- }
- (async () => {
- await trafficLight(lighter, 10000, 5000, 10000);
- })();
- // domEventPromise
- async function domEventPromise(element, eventName) {
- return new Promise(async (resolve, reject) => {
- try {
- element.addEventListener(eventName.toLowerCase(), async (e) => {
- await resolve(e);
- element.removeEventListener(eventName.toLowerCase(), this);
- })
- } catch (err) {
- await reject(err);
- }
- })
- }
- domEventPromise(knopka, 'click').then(e => console.log('event click happens', e));
- // PedestrianTrafficLight светофор для пешеходов
- async function PedestrianTrafficLight() {
- let h = document.createElement('h1')
- h.textContent = 'Светофор для пешеходов синхронизированный с автомобильным светофором'
- h.style.textAlign = 'center'
- document.body.append(h);
- let container = document.createElement('div');
- let green = document.createElement('div');
- let red = document.createElement('div');
- let btn = document.createElement('button');
- green.className = 'lighter__elem';
- red.className = 'lighter__elem';
- red.style.backgroundColor = '#b93c00';
- green.style.backgroundColor = '#696969FF';
- container.className = 'container';
- btn.textContent = 'PedestrianTrafficLight';
- container.append(green, red, btn);
- document.body.append(container);
- let container2 = document.createElement('div');
- let greenAuto = document.createElement('div');
- let yellowAuto = document.createElement('div');
- let redAuto = document.createElement('div');
- greenAuto.className = 'lighter__elem';
- yellowAuto.className = 'lighter__elem';
- redAuto.className = 'lighter__elem';
- container2.className = 'container';
- container2.append(greenAuto, yellowAuto, redAuto);
- document.body.append(container2);
- while (true) {
- yellowAuto.style.backgroundColor = '#696969FF';
- greenAuto.style.backgroundColor = '#309600';
- btn.disabled = true;
- await delay(5000)
- greenAuto.style.backgroundColor = '#696969FF';
- yellowAuto.style.backgroundColor = '#e2e83c';
- btn.disabled = true;
- await delay(1000)
- yellowAuto.style.backgroundColor = '#696969FF';
- redAuto.style.backgroundColor = '#b93c00';
- btn.disabled = false;
- await Promise.race([
- domEventPromise(btn, 'click').then(async e => {
- red.style.backgroundColor = '#696969FF';
- green.style.backgroundColor = '#309600';
- btn.disabled = true;
- await delay(3000);
- green.style.backgroundColor = '#696969FF';
- red.style.backgroundColor = '#b93c00';
- }, err => console.log(err)),
- await delay(5000)]
- );
- redAuto.style.backgroundColor = '#696969FF';
- yellowAuto.style.backgroundColor = '#e2e83c';
- btn.disabled = true;
- await delay(1000)
- }
- }
- (async () => await PedestrianTrafficLight())()
- // speedtest
- async function speedtest(getPromise, count=1, parallel=1) {
- let duration, querySpeed, queryDuration, parallelSpeed, parallelDuration;
- let start = performance.now(); // duration
- let querySpeedArr = [];
- await (async () => {
- for (let i = 0; i < count; i++) {
- let arrPromise = []
- for (let j = 0; j < parallel; j++) {
- arrPromise.push(getPromise);
- }
- let querySpeedItemStart = performance.now();
- await Promise.all([...arrPromise.map(item => item())]);
- querySpeedArr.push(performance.now() - querySpeedItemStart);
- }
- })()
- duration = Math.round(performance.now() - start);
- querySpeed = (count * parallel) / 100000;
- queryDuration = querySpeedArr.reduce((a, b) => (a + b)) / querySpeedArr.length;
- parallelSpeed = duration / (count * parallel) / 10000;
- parallelDuration = duration / (count * parallel);
- return {
- duration, //общая длительность работы цикла
- querySpeed, //реальная средняя скорость запроса
- queryDuration, //реальное среднее время запроса
- parallelSpeed, //скорость в запросах в миллисекунду
- parallelDuration //среднее время обработки запроса параллельно
- }
- }
- speedtest(() => delay(1000), 10, 10).then(result => console.log(result))
- speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5).then(result => console.log(result));
|