Задать вопрос
Ответы пользователя по тегу JavaScript
  • Почему не получается получить состояние стороннего сервиса?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    docker.ping() видимо, возвращает Promise. Надо дождаться его выполнения и только тогда возвращать ответ.
    примерно так
    const promises = endpoints.filter((i) => i.type === 1)
    .map((i) => {
      const result = {
        id: i.id,
        name: i.name,
        type: i.type,
        url: i.url,
        groupId: i.groupId
      };
    
      const settings = (i.url.match('unix:///var/run/docker.sock')) ?
          {socketPath: '/var/run/docker.sock'} : {host: i.url, port: 2375};
      const docker = new Docker(settings);
    
      return docker.ping().then(err => {
        result.status = !err;
        return result;
      })
    });
    
    Promise.all(promises).then((results) => res.send(results));
    Ответ написан
    Комментировать
  • Как построить такую перспективу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В Adobe Photoshop есть похожий инструмент, называется Vanishing Point.

    4 точки задают сетку, которую можно продлить и за границы четырёхугольника. Т.е. точки только определяют характеристики искажения для целой плоскости. Помещённую на полученную перспективную сетку картинку можно увеличивать и двигать.

    Четырёхугольник считается изначально прямоугольником фиксированной пропорцией ширины к высоте. Например, квадратом. Когда его углы перемещаются, противоположные грани перестают быть параллельными и появляется точка их пересечения (vanishing point) – типа, как бесконечно удалённая точка.

    Подробнее про перспективу и её математику (на англ.) например тут и тут.

    Итого, 4 точки задают формулы, позволяющие изнутри плоскости спроецировать на экран. И в эту плоскость помещается изображение, которое двигают и масштабируют, и получают его отображение на плоскость экрана.
    Маска убирает лишнее в координатах экрана.
    Ответ написан
  • Как сделать рассылку комментария по форумам и площадкам?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Смотрите в сторону автоматизации браузера и безголовых (headless) браузеров. Наверное, затея поможет вам разобраться с новой технической темой, но я бы попросил вас воздержаться от рассылки сообщений и найти более элегантный способ решать конфликт с компанией.
    Ответ написан
  • Как поменять функции местами в js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Есть 2 возможных состояния: работает слайдер, или статичные теги. Одна функция пусть устанавливает одно или второе:
    const sliderOptions = {
      arrows: true,
      dots: false,
      variableWidth: true,
      centerMode: true,
      slidesToShow: 8,
      autoplay: true,
      autoplaySpeed: 2000,
      slidesToScroll: 3,
      nextArrow: '<div class="tags__arrow tags__arrow_next">',
      prevArrow: '<div class="tags__arrow tags__arrow_prev">',
      appendArrows: $('.tags__arrows'),
    }
    
    const sliderSet = (is_on) => {
      if (is_on) {
        $('.tags__option_on').hide();
        $('.tags__option_off').show();
        $('.tags__inner').slick(sliderOptions);
      } else {
        $('.tags__option_on').show();
        $('.tags__option_off').hide();
        $('.tags__inner').slick('unslick');
      }
    }
    
    $('.tags__option_on').on('click', () => sliderSet(true));
    $('.tags__option_off').on('click', () => sliderSet(false));
    
    sliderSet(false); // начальное состояние
    Ответ написан
    Комментировать
  • Какая разница между await и Promise?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Promise – сложная штуковина для асинхроты всякой, с кучей методов.
    Зачем забивать себе голову, если можно зайти на QnA, задать вопрос и поджидать await готовый ответ.
    В это время не сидеть-тупить в экран, а пойти чайку попить. Как появится ответ — продолжим дальше.
    Ответ написан
    7 комментариев
  • Как создать массивы из JSON?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Не «как», а «когда».

    Там, где console.log() выводит успешно то, что надо — там же и инициализируйте autocomplete.
    Ответ написан
    3 комментария
  • Как анимировать элементы одновременно?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Попробуйте так:
    const animateElement = (el) => {
      const endValue = +el.dataset.value;
      let currValue = 0;
    
      const update = () => {
        el.innerText = ++currValue;
        if (currValue < endValue) {
          setTimeout(update, 20);
        }
      }
    
      update();
    }
    
    [...document.querySelectorAll('[data-value]')].forEach(animateElement);
    Тут неоптимальный момент, обилие часто создаваемых Timeout'ов: при большом количестве элементов и короткой задержке может тормозить. Альтернативный вариант сделать единые общие «часы» обновляющие, при необходимости, каждого участника коллекции.
    Ответ написан
    Комментировать
  • Как отменить предыдущее условие в if?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    я бы предложил разделить логику от представления. Хотя бы не опираться на наличие класса в принятии решений.

    Оба варианта (А/Б) текста можно расположить в разметке:
    <div class="container">
    
      <p class="text" data-text-a="ЭТО СТАРЫЙ ТЕКСТ" data-text-b="ВОТ НОВЫЙ ТЕКСТ"></p>
    
      <div class="btn">ВЫБРАТЬ</div>
    </div>

    Текущее состояние держать в объекте
    const state = {
      isPrimary: true,
      // потом добавятся может ещё свойства
    };

    Отдельно функция render(), которая отрисовывает состояние «на сейчас».
    По кнопке менять состояние и вызывать перерисовку.

    Ответ написан
    Комментировать
  • Как проверить на правильное значение?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    while ('Буратино' !== window.prompt('Как его зовут?!'));
    Ответ написан
    Комментировать
  • Какие методы лучше использовать для получения двух пар ключ \ значения?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно с destructuring assignment примерно так:
    oldArray.map(({prop1, prop2} => ({prop1, prop2}))

    const oldArray = [
      {a: "A1", b: "BB1", prop1: "wanted1", prop2: "dead or alive1", z: "zee1"},
      {a: "A2", b: "BB2", prop1: "wanted2", prop2: "dead or alive2", z: "zee2"},
      {a: "A3", b: "BB3", prop1: "wanted3", prop2: "dead or alive3", z: "zee3"},
      {a: "A4", b: "BB4", prop1: "wanted4", prop2: "dead or alive4", z: "zee4"},
      {a: "A5", b: "BB5", prop1: "wanted5", prop2: "dead or alive5", z: "zee5"},
    ];
    
    const newArray = oldArray.map(({prop1, prop2}) => ({prop1, prop2}));
    // [
    //   {"prop1": "wanted1", "prop2": "dead or alive1"},
    //   {"prop1": "wanted2", "prop2": "dead or alive2"},
    //   {"prop1": "wanted3", "prop2": "dead or alive3"},
    //   {"prop1": "wanted4", "prop2": "dead or alive4"},
    //   {"prop1": "wanted5", "prop2": "dead or alive5"}
    // ]
    Ответ написан
    Комментировать
  • Как исправить, чтобы document on click не срабатывал несколько раз?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Перенесите скрипт обработчика из подгружаемых ajax'ом фрагментов в страницу, чтобы присутствовал лишь раз.

    * * *
    Вообще, если не вешать каждый раз новую анонимную функцию, а вынести обработчик во внешнюю функцию, и отказаться от jQuery, то обработчик сработает лишь однажды:
    const handler = () => {
      console.log('click');
    }
     
    document.addEventListener('click', handler);
    document.addEventListener('click', handler);
    document.addEventListener('click', handler);
    // при клике выведет только 1 сообщение в консоль

    Но у jQuery иная механика:
    $(document).on('click', handler);
    $(document).on('click', handler);
    $(document).on('click', handler);
    // при клике вывалится 3 сообщения
    Ответ написан
    Комментировать
  • Как удалить всё символы до первого / с конца?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно через метод строки lastIndexOf() искать последнее вхождение слеша в строку:
    const dirname = (str) => {
      const pos = str.lastIndexOf('/');
      if (-1 === pos) return str;
      return str.substring(0, pos);
    }
    
    dirname('/siparis/kampanyalar/tumu/cok-karisik-orta-firsati')
    // /siparis/kampanyalar/tumu
    Ответ написан
    Комментировать
  • Можно как-то вернуть данные из values, чтобы отказаться от then(-ов) для каждого запроса?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const [data1, data2, data3] = await Promise.all(
      ['/test1', '/test2', '/test3']
      .map((url) => http.get(url).then(({ data }) => data))
    )
    .then((values) => {
      console.log('values', values);
      return values;
    });


    Или
    const [data1, data2, data3] = await Promise.all(
      ['/test1', '/test2', '/test3']
      .map((url) => http.get(url))
    )
    .then((values) => values.map(({ data }) => data));
    Ответ написан
    3 комментария
  • Как обработать массив последовательно?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    var array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
    
    array
    // из каждого сделать функцию, возвращающую промис
    .map((el) => () => new Promise((resolve, reject) => $.ajax({
      url: '/assets/themes/theme/send.php',
      method: 'post',
      data: {text: el},
      success: resolve,
      error: reject,
    })))
    // склеить цепочку
    .reduce((acc, c) => acc.then(() => c()), Promise.resolve())
    .catch(err => console.error(err));
    Ответ написан
  • Как работает цикл?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Вывод к консоль — друг человека!
    for (let i = 2; i <= 10; i++) {
      console.log('i  %02d', i);
    
      for (let k = 2; k < i; k++) { 
        console.log(' k %02d', k);
        if (i % k == 0) continue;
      }
    }

    Начало вывода:
    i   2
    i   3
     k  2
    i   4
     k  2
     k  3
    i   5
     k  2
     k  3
     k  4
    i   6
     k  2
     k  3
     k  4
     k  5
    i   7
    Ответ написан
    Комментировать
  • Как правильно сделать условие?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const messages = {
      'ru': 'Ваше сообщение успешно отправлено!',
      'ua': 'Ваше повідомлення успішно відправлено!',
      'en': 'Your message has been successfully sent!',
      'cn': '您的留言已成功发送!',
    }
    
    const path = window.location.pathname; // чтобы не совпало с ya.ru/zz/search?q=/ru/
    
    const defaultLanguage = 'en';
    
    const language = Object.keys(messages)
      .reduce((acc, c) => path.includes(`/${c}/`) ? c : acc, defaultLanguage);
    
    const text = messages[language];
    Ответ написан
    2 комментария
  • Как разделить цифру на числа и умножить в Javascript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    let digits = "85172"; // в кавычках, значит это строка
    let product = 1; // произведение
    
    // у строки есть свойство длины: length
    // к букве в строке можно обращаться по номеру её положения
    // буква – тоже строка, надо её перевести в число через Number()
    for (let i = 0; i < digits.length; i++) {
      const digit = Number(digits[i]); // цифра
      product = product * digit;
    }
    
    // умножили. Теперь можно вывести:
    console.log(product); // 560
    Ответ написан
    Комментировать
  • Как ответ сервера через fetch вернуть в виде текста в переменную?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Сетевые запросы асинхронны по своей природе: выполняются непредсказуемо долго.

    Попробуйте изменить общую логику приложения так, чтобы результат запроса, когда появится, не просто назначался в какую-то переменную, а вызывал колбэк с результатом.
    function getIndex(adr) {
      // ...
      return fetch(ajaxurl, {
        method: 'POST',
        body: formData
      }).then(resp => resp.text())
        .then(showResult)
        // парашютики не забываем:
        .catch(err => console.error(err));
    }
    
    function showResult(data) {
      console.log(data);
    }
    
    getIndex('https://ya.ru/'); // вернёт промис, ну и фиг с ним


    Либо поместите всю логику дальнейшей работы с результатом прямо в цепочку промисов:
    function getIndex(adr) {
      // ...
      return fetch(ajaxurl, {
        method: 'POST',
        body: formData
      }).then(resp => resp.text())
        .then(showResult)
        .catch(err => console.error(err));
    }
    
    getIndex('https://ya.ru/')
      .then(data => {
        document.querySelector('#output').innerText = data;
      })
      .catch(err => console.error(err));
    Ответ написан
    1 комментарий
  • В чем изьяны моего чудища?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В вашем коде не сравниваются все возможные варианты.
    Он проваливает два примера из вопроса:
    [2, -1, 2, 3, -9] = 6 (у вас получается 5)
    и [-2, -1, 1, 2] = 3 (у вас выводит 2)

    spoiler
    Предлагаю такой вариант решения. Возможно, не оптимальный. Полный перебор.

    Будем двигать «окно» по массиву, считая сумму элементов в нём. Размер окна от всего массива до окошечка размером в 1 элемент.
    Считаем сумму в начальном положении окна. Затем, двигаясь вправо, вычитаем элемент слева и прибавляем элемент справа.

    Минимально возможная сумма — ноль.
    function getMaxSubSum(arr) {
      let max = 0;
      const length = arr.length;
    
      for (let frame = length; frame > 0; frame--) {
        let sum = 0;
        for (let i = 0; i < frame; i++) sum += arr[i];
        max = Math.max(max, sum);
    
        // move frame
        for (let offset = 1; offset <= length - frame; offset++) {
          sum -= arr[offset - 1];
          sum += arr[offset + frame - 1];
          max = Math.max(max, sum);
        }
      }
    
      return max;
    }
    
    
    const tests = () => {
      [
        [[-1, 2, 3, -9], 5],
        [[2, -1, 2, 3, -9], 6],
        [[-1, 2, 3, -9, 11], 11],
        [[-2, -1, 1, 2], 3],
        [[100, -9, 2, -3, 5], 100],
        [[1, 2, 3], 6],
        [[-1, -2, -3], 0],
      ].forEach((el, i) => {
        const result = getMaxSubSum(el[0]);
        console.assert(result === el[1], "Test %d failed: [%s] %d != %d", i, el[0], result, el[1]);
      })
    }
    
    tests();
    Ответ написан