Задать вопрос
vabka

Василий Банников

Ответы пользователя по тегу JavaScript

  • Как работает этот код? Почему у функции появляется метод?

    vabka
    @vabka
    В JS функции - это тоже объекты.
    У объектов вполне могут быть какие-то поля, которые тоже могут быть функциями.
    Ответ написан
    Комментировать
    Комментировать

  • Почему складывается не строки, а числа?

    vabka
    @vabka
    Код у тебя, конечно, ужас.
    Вместо того чтобы складывать/умножать на innerHTML тебе нужно преобразовывать его в число.
    Например при помощи функции parseInt
    Ответ написан
    Комментировать
    Комментировать

  • Почему Ajax запрос не возвращает данные?

    vabka
    @vabka
    Ошибка у тебя в том, что Ajax-запрос выполняется асинхронно.
    Тоесть функция getName вернёт управление в вызывающую функцию ещё до того, как даже будет вызван твой onload.
    + по хорошему onload нужно устанавливать ещё до отправки.
    Это раз.

    А два - return твой возвращает управление в момент вызова onload, а по тому просто некому будет на той стороне прочитать полученные данные.

    Решения два:
    1. Использовать промисы. Например так:
    function getName(user_id) {
    return new Promise(function(resolve) {
        // data
        var data = {}
        data.user_id = user_id
        data = JSON.stringify(data)

        // send
        const request = new XMLHttpRequest();
        request.open("POST", "/test-ajax/");
        request.send(data);
        request.onload = function() {
            var name = JSON.parse(this.response)
            resolve(name);
        }
    });
}

// Дальше работаем через then
getName(user_id).then(data=>console.log(data));

// Или async/await
const name = await getName(user_id);

    В этом примере мы сразу возвращаем объект-промис, который будет завершён внутри onload. А дальше можно с ним работать через async-await или then с коллбэком.

    2. Использовать коллбэки (по старинке):
    function getName(user_id, callback) {

    // data
    var data = {}
    data.user_id = user_id
    data = JSON.stringify(data)

    // send
    const request = new XMLHttpRequest();
    request.open("POST", "/test-ajax/");
    request.send(data);

    // get
    request.onload = function() {
        var name = JSON.parse(this.response)
        callback(name)
    }
}

var onNameLoaded = function(name) {
    console.log(name)
};
getName(user_id, onNameLoaded);

    В этом примере мы передаём в функцию getName другую функцию, которая должна быть вызвана после загрузки данных.

    3. Использовать fetch и async/await - мы же в 2022 году живём. (@Mi11er)
    async function getName(userId) {
    const response = await fetch("/test-ajax/", {
        method: "POST",
        body: JSON.stringify({"user_id": userId})
    })
    return await response.json();
}

const name = await getName(userId);
    Ответ написан
    8 комментариев
    8 комментариев

  • Js какой код производительнее?

    vabka
    @vabka
    1й вариант - очень многословный. Не говоря даже о том, что в коде ошибка (не хватает })
    2й вариант - навешиваем хендлер на все элементы, а фильтруемся уже внутри хендлера
    3й вариант - как 1й, но более читабельный.

    Кажется, что 2й вариант будет менее производительным, если у тебя очень много элементов, тк каждый раз будет происходить проверка, а не содержит ли список классов, нужный класс.
    Но нужно профайлить, чтобы ответить более аргументированно.

    Аналогично при сравнении 1 и 3.

    Я бы не стал задумываться о том, какой из них действительно более производительный, пока не столкнулся бы с проблемой, а она врядли произойдёт.
    Используйте то, что удобнее и читабельнее в конкретной ситуации.
    Ответ написан
    Комментировать
    Комментировать

  • Как работает свитч-кейс?

    vabka
    @vabka
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    switch-case в js не умеет сопоставлять одновременно несколько значений.
    Так что никак твой код рабочим не сделать.
    Тем более, что не понятно, что он должен делать.

    В общем случае switch разворачивается примерно вот так:

    switch (expression) { // expression - это какое-то выражение. Тоесть значение одно.
  case variant1: // variant1 и variant2 - это тоже какое-то выражение. Тоесть тоже ровно одно значение.
    // ...
  break;
  case variant2:
    // ...
  break;
  default:
    // ...
  break;
}

// Вот в такое
const value = expression;
if(value === variant1) {
  //...
} else if (value === variant2) {
  //...
} else {
  // ...
}
    Ответ написан
    Комментировать
    Комментировать

  • Это переменные или аргумент стрелочной функции? Почему?

    vabka
    @vabka
    Да
    Ответ написан
    Комментировать
    Комментировать

  • Интеграция C++ в Electron'е?

    vabka
    @vabka
    C++ умеет компилироваться в wasm, а wasm умеет работать с канвасом через webgl.

    Но, ИМХО, если идти в эту сторону, то использование какого-нибудь tauri+Rust выглядит разумнее, чем Electron + C++
    Ответ написан
    1 комментарий
    1 комментарий

  • Как ускорить fetch в цикле?

    vabka
    @vabka
    мне нужно достать первую которая ответила статусом 200

    Например, ты можешь вместо Promise.all использовать Promise.any
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Или Promise.race
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Ответ написан
    1 комментарий
    1 комментарий

  • Как перенести переменную js из окна на другую страницу?

    vabka
    @vabka Куратор тега Веб-разработка
    А для чего именно нужно передать?
    Есть разные способы и не все вам могут подойти.
    Самый простой и без привлечения сервера - через local storage
    Ответ написан
    2 комментария
    2 комментария

  • Как подключить пакеты в Node.js?

    vabka
    @vabka
    Копия моего комментария, с попыткой воспроизвести

    Вот с таким package.json
    {
  "name": "node_test",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "spotify-web-api-js": "^1.5.2"
  },
  "type": "module"
}

    и вот таким index.js:
    import SpotifyWebApi from "spotify-web-api-js";
// const SpotifyWebApi = require("spotify-web-api-js");
const spotify = new SpotifyWebApi();
spotify.getGeneric("???", () => console.log("callback"));

    Всё работает.
    Если убрать type: module, то тогда вместо import можно (и нужно) будет использовать require.

    Ну кроме того что библиотека эта предназначена для браузера, а не для ноды, а по тому она сразу падает из-за того что не может найти XMLHttpRequest.

    Мне кажется, вы просто забыли вызвать npm install, чтобы скачать зависимости.

    PS: в ноде эту библиотеку использовать нельзя.
    Для ноды следует брать эту:https://www.npmjs.com/package/spotify-web-api-node
    Ответ написан
    2 комментария
    2 комментария

  • Как подключить Centrifuge в React?

  • Какой язык полезно будет выучить для расширения кругозора?

    vabka
    @vabka
    Если хочется дополнить свой основной инструментарий, не уходя в какой-то экстрим - TypeScript.

    Хочется чего-то нового - какой-нибудь функциональный язык типа Haskell, F#, ReasonML (если понравится, то тоже можно взять в свой инструментарий, тк для F# есть Fable, а Haskell на фронте существует в виде ReasonML)

    Хочется чего-то совсем новых ощущений - Rust (можно тоже взять в свой инструментарий, тк на нём неплохо можно модули на wasm писать)
    Ответ написан
    Комментировать
    Комментировать

  • Как создать анимацию как здесь https://promexcut.ru/?

    vabka
    @vabka Куратор тега Веб-разработка
    Конкретно тут это реализовано через плоские 2d-картинки, к которым применяется transform.
    Хотя может быть и правда какой-нибудь сторонний софт умеет в такой вид экспортироваться.
    Вот например картинка с машиной:
    car4.png
    Сами изображения были изначально смоделированы в 3d и отрендерены в картинки с тенями и прозрачным фоном.
    Ответ написан
    Комментировать
    Комментировать

  • Для чего нужны Map и Set?

    vabka
    @vabka
    Окей гугл, что такое "структуры данных".

    Нужны они для не очень частых случаев, когда объект (по сути тот же Map со строковым ключом) или массив не удобны, либо слишком неэффективны (тут следует загуглить О-большое).

    Например при помощи Map ты можешь сопоставить одному объекту другой объект, чего ты никак не можешь сделать при помощи обычных объектов.

    А при помощи Set ты можешь получить массив без повторов, и при этом без необходимости при каждой вставке проверять, есть ли такой элемент в массиве, или нет.
    Ответ написан
    Комментировать
    Комментировать

  • Как определить что запрос к api пришел с клиента?

    vabka
    @vabka
    Никак.
    Ответ написан
    Комментировать
    Комментировать

  • Что за код на 10000 строк?

    vabka
    @vabka
    Это минифицированный код.
    Спрашивай у автора, где исходники
    Ответ написан
    Комментировать
    Комментировать

  • Почему Rust нужна хэш-функция для реализации объектов, а JS такое не использует?

    vabka
    @vabka Куратор тега Rust
    Вообще объекты в JS - это тоже hashmap, и в этой структуре есть защита от коллизий:
    Если вдруг два разных ключа получили один и тот же хеш, то они складываются в одну корзину, и при попытке получить значение по ключу - придётся ещё пройтись по всем парам ключ-значение в этой корзине, чтобы найти нужный ключ, уже используя Eq.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать чтобы websocket соединения не разрывалось когда комп уходит в спящий режим?

    vabka
    @vabka
    Так вот все вышеописанное работает хорошо но до того момента как наш комп не уйдет в спящий режим, и тогда , примерно через 30 сек вебсокет соединения разрывается

    По вполне понятной причине:
    Вебсокет работает поверх TCP. Когда в рамках TCP-соединения не передаются никакие сообщения - оно разрывается, причём вроде аж на уровне провайдера.

    Смысла держать вебсокет работающим даже когда компьютер не работает нет, как и технической возможности.
    Просто учитывай это и поднимай вебсокет заново, если он вдруг разорвался.
    Можно попутно ещё запросить сообщения, которые были отправлены с момента разрыва (например с даты последнего полученного сообщения)
    Ответ написан
    Комментировать
    Комментировать

  • Как преобразовать/скачать книгу с сайта "онлайн-библиотеки"?

    vabka
    @vabka
    Так как на сайте не предусмотрена такая возможность - только реверсить.
    На сайте нет никаких защит от пиратства, так что можешь зайти во вкладку network и увидеть, какие отправляются запросы.
    В данном случае используется graphql и для получения списка страниц используется такой запрос:
    query Book($id: ID!) {
  book(id: $id) {
    id
    title
    authors {
      full_name
      __typename
    }
    docviewer_htmls_urls
    docviewer_thumbnails_urls
    outline
    is_on_shelf
    bookmarks {
      page
      text
      ts
      __typename
    }
    search_index_url
    text_by_pages_url
    last_read_page
    __typename
  }
  me {
    uid
    __typename
  }
}

    Где id - Id книги.
    В ответ приходит такое:
    {
    "data": {
        "book": {
            "id": "14137",
            "title": "\u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043d\u0430\u0440\u043e\u0434\u0430 \u0441\u0430\u0445\u0430 \u0438 \u0435\u0433\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u044b",
            "authors": [
                {
                    "full_name": "\u0413\u043e\u0433\u043e\u043b\u0435\u0432 \u0410\u043d\u0430\u0442\u043e\u043b\u0438\u0439 \u0418\u0433\u043d\u0430\u0442\u044c\u0435\u0432\u0438\u0447",
                    "__typename": "Author"
                }
            ],
            "docviewer_htmls_urls": [
                "https:\/\/e.nlrs.ru\/online2\/view\/14137\/page_1.html"
            ],
            "docviewer_thumbnails_urls": [
                "https:\/\/e.nlrs.ru\/online2\/view\/14137\/thumbnails\/256\/bg1_thumb_256.jpg"
            ],
            "outline": "[{\"text\":\"\u041e\u0431\u043b\u043e\u0436\u043a\u0430\",\"href\":\"#pf1\",\"children\":null},{\"text\":\"\u0427\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u044d\u043d\u0442\u043e\u0433\u0435\u043d\u0435\u0437\u0430 \u044f\u043a\u0443\u0442\u0441\u043a\u043e\u0439 \u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0441\u0442\u0438\",\"href\":\"#pf4\",\"children\":null},{\"text\":\"\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435\",\"href\":\"#pf5\",\"children\":null},{\"text\":\"\u0413\u043b\u0430\u0432\u0430 \u043f\u0435\u0440\u0432\u0430\u044f. \\n\u0418\u0421\u0422\u041e\u041a\u0418 \u042d\u0422\u041d\u041e\u0413\u0415\u041d\u0415\u0417\u0410 \\n(\u0441\u043a\u0438\u0444\u043e-\u0445\u0443\u043d\u043d\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u044f\u043a\u0443\u0442\u0441\u043a\u043e\u0439 \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u0435)\",\"href\":\"#pf5\",\"children\":null},{\"text\":\"\u0413\u043b\u0430\u0432\u0430 \u0432\u0442\u043e\u0440\u0430\u044f. \u0414\u0420\u0415\u0412\u041d\u0418\u0415 \u0418 \u0421\u0420\u0415\u0414\u041d\u0415\u0412\u0415\u041a\u041e\u0412\u042b\u0415 \u0422\u042e\u0420\u041a\u0421\u041a\u0418\u0415 \u041f\u041b\u0415\u041c\u0415\u041d\u0410 \u042e\u0416\u041d\u041e\u0419 \u0421\u0418\u0411\u0418\u0420\u0418, \u0426\u0415\u041d\u0422\u0420\u0410\u041b\u042c\u041d\u041e\u0419 \u0410\u0417\u0418\u0418 \u0418 \u041f\u0420\u0418\u0411\u0410\u0419\u041a\u0410\u041b\u042c\u042f \\n\u0412 \u042d\u0422\u041d\u041e\u0413\u0415\u041d\u0415\u0417\u0415 \u042f\u041a\u0423\u0422\u041e\u0412.\\n\u0421\u041b\u041e\u0416\u0415\u041d\u0418\u0415 \u041e\u0421\u041d\u041e\u0412 \u0414\u0420\u0415\u0412\u041d\u0415\u042f\u041a\u0423\u0422\u0421\u041a\u041e\u0419 \u041a\u0423\u041b\u042c\u0422\u0423\u0420\u042b\",\"href\":\"#pf1c\",\"children\":null},{\"text\":\" \u0413\u043b\u0430\u0432\u0430 \u0442\u0440\u0435\u0442\u044c\u044f. \u0418\u0421\u0422\u041e\u0420\u0418\u041a\u041e-\u041a\u0423\u041b\u042c\u0422\u0423\u0420\u041d\u042b\u0415 \u0421\u0412\u042f\u0417\u0418 \u042f\u041a\u0423\u0422\u041e\u0412 \u0421 \u0421\u041e\u0412\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u041c\u0418 \u0422\u042e\u0420\u041a\u041e\u042f\u0417\u042b\u0427\u041d\u042b\u041c\u0418 \u041d\u0410\u0420\u041e\u0414\u0410\u041c\u0418 \u042e\u0416\u041d\u041e\u0419 \u0421\u0418\u0411\u0418\u0420\u0418 \u0418 \u0411\u0423\u0420\u042f\u0422\u0410\u041c\u0418\",\"href\":\"#pf30\",\"children\":null},{\"text\":\"\u0427\u0430\u0441\u0442\u044c \u0432\u0442\u043e\u0440\u0430\u044f. \u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u044d\u0442\u043d\u043e\u0433\u0435\u043d\u0435\u0437\u0430 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u044b \u043d\u0430\u0440\u043e\u0434\u0430 \u0441\u0430\u0445\u0430 \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u0439 \u041b\u0435\u043d\u0435\",\"href\":\"#pf5b\",\"children\":null},{\"text\":\"\u0413\u043b\u0430\u0432\u0430 \u043f\u0435\u0440\u0432\u0430\u044f. \u0410\u0420\u0425\u0415\u041e\u041b\u041e\u0413\u0418\u0427\u0415\u0421\u041a\u0418\u0415 \u041f\u0410\u041c\u042f\u0422\u041d\u0418\u041a\u0418 \u0426\u0415\u041d\u0422\u0420\u0410\u041b\u042c\u041d\u041e\u0419 \u042f\u041a\u0423\u0422\u0418\u0418 \u0421\u0420\u0415\u0414\u041d\u0415\u0412\u0415\u041a\u041e\u0412\u042c\u042f, \u0421\u0412\u042f\u0417\u0410\u041d\u041d\u042b\u0415 \u0421 \u041f\u0420\u041e\u0418\u0421\u0425\u041e\u0416\u0414\u0415\u041d\u0418\u0415\u041c \u042f\u041a\u0423\u0422\u041e\u0412 (\u0420\u0423\u0411\u0415\u0416 XIII-XIV -  XVI \u0432\u0432.)\",\"href\":\"#pf5c\",\"children\":null},{\"text\":\"\u0413\u043b\u0430\u0432\u0430 \u0432\u0442\u043e\u0440\u0430\u044f. \\n\u0410\u0420\u0425\u0415\u041e\u041b\u041e\u0413\u0418\u0427\u0415\u0421\u041a\u0418\u0415 \u041f\u0410\u041c\u042f\u0422\u041d\u0418\u041a\u0418 \u042f\u041a\u0423\u0422\u0418\u0418 XVI-XVIII \u0432\u0432. \u0418 \u0417\u0410\u0412\u0415\u0420\u0428\u0415\u041d\u0418\u0415 \u0424\u041e\u0420\u041c\u0418\u0420\u041e\u0412\u0410\u041d\u0418\u042f \u0422\u0420\u0410\u0414\u0418\u0426\u0418\u041e\u041d\u041d\u041e\u0419 \u041a\u0423\u041b\u042c\u0422\u0423\u0420\u042b \u041d\u0410\u0420\u041e\u0414\u0410 \u0421\u0410\u0425\u0410\",\"href\":\"#pf6a\",\"children\":null},{\"text\":\"\u0413\u043b\u0430\u0432\u0430 \u0442\u0440\u0435\u0442\u044c\u044f. \\n\u0421\u041e\u041e\u0422\u041d\u041e\u0428\u0415\u041d\u0418\u0415 \u041f\u0420\u0418\u0428\u041b\u042b\u0425 \u0418 \u0410\u0411\u041e\u0420\u0418\u0413\u0415\u041d\u041d\u042b\u0425 \u042d\u041b\u0415\u041c\u0415\u041d\u0422\u041e\u0412 \u0412 \u0422\u0420\u0410\u0414\u0418\u0426\u0418\u041e\u041d\u041d\u041e\u0419 \u041a\u0423\u041b\u042c\u0422\u0423\u0420\u0415 \u042f\u041a\u0423\u0422\u041e\u0412\",\"href\":\"#pf7b\",\"children\":null},{\"text\":\"\u041b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u0430\",\"href\":\"#pf8e\",\"children\":null},{\"text\":\"\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\",\"href\":\"#pf91\",\"children\":null}]",
            "is_on_shelf": true,
            "bookmarks": [],
            "search_index_url": "https:\/\/e.nlrs.ru\/get-online2-search-index\/14137\/full",
            "text_by_pages_url": "https:\/\/e.nlrs.ru\/get-online2-text-by-pages\/14137\/full",
            "last_read_page": 8,
            "__typename": "Book"
        },
        "me": {
            "uid": "163217",
            "__typename": "User"
        }
    }
}

    Слать нужно на https://e.nlrs.ru/graphql
    Ответ написан
    Комментировать
    Комментировать

  • Почему 0.35 -> toFixed(1) = 0.3?

    vabka
    @vabka
    Это виноват IEEE754
    Ответ написан
    Комментировать
    Комментировать