Почему мои данные JSON загружаются в неправильном порядке с использованием JavaScript?

Question

Я сделал расширение для Chrome, которое выбирает цены из документа JSON и вставляет их на веб-сайт, но цены вводятся в неправильном порядке. Веб-сайт csgoempire.com/withdraw

Я пытался установить тайм-аут для chrome.runtime.sendMessage, но это только задержало его в начале, а не для каждого запуска цикла.

content.js

function replacePrices() {
    let skinNumber = 1;
    console.log("Changing Prices");
    let prices = document.getElementsByClassName('item__price');

    var priceNumber = 0;
    for (elt of prices) {
        var skinNick = document.getElementsByClassName("px-2");
        let skinFullName = skinNick[skinNumber].textContent;

        let containsFactoryNew = skinFullName.includes('Factory New');
        let containsMinimalWear = skinFullName.includes('Minimal Wear');
        let containsFieldTested = skinFullName.includes('Field-Tested');
        let containsWellWorn = skinFullName.includes('Well-Worn');
        let containsBattleScarred = skinFullName.includes('Battle-Scarred');

        let isBundle = skinFullName.includes('Bundle');

        if (isBundle === true) {
            let price = 'Bundle';
        } else {

            if (containsFactoryNew === true || containsMinimalWear === true || containsFieldTested === true || containsWellWorn === true || containsBattleScarred === true) {
                skinWear = '(' + skinFullName + ')';
                skinFullName = '';
            } else {
                skinFullName = skinFullName.trim();
                skinFullName = skinFullName.replace(/\s\s+/g, ' | ');
                skinFullName = skinFullName + ' ' + skinWear;
                console.log(skinFullName);

                chrome.runtime.sendMessage(
                    {contentScriptQuery: "queryPrice", itemURL: skinFullName},
                    price => {
                        prices[priceNumber].innerHTML = prices[priceNumber].innerHTML + ' | ' + price;
                        prices[priceNumber].style.cssText = 'color: silver; font-size: .8125rem; font-weight: 700; font-family: Lato,sans-serif;';
                        priceNumber = priceNumber + 1;
                    });
                skinWear = '';
            }
        }

        // http://steamcommunity.com/market/priceoverview/?appid=730&currency=3&market_hash_name=StatTrak%E2%84%A2 M4A1-S | Hyper Beast (Minimal Wear)

        skinNumber = skinNumber + 1;
    }

    btnReplace.innerHTML = "Reload Steam Market Prices";
}

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if (request.contentScriptQuery == "queryPrice") {
        var url = "https://pixelboii.wtf/steamvalue.json";
        var skinFullName = request.itemURL;
        fetch(url)
            .then(res => res.json())
            .then(price => {
              sendResponse(price.items_list[skinFullName].price["7_days"].average);
            })
            .catch(err => { throw err });
        return true;  // Will respond asynchronously.
      }
    });

Предполагается, что цены загружаются так, чтобы они соответствовали позиции, которую они поместили ниже, но в настоящее время они смешаныдруг с другомНет кодов ошибок.

Answer 1

У вас есть проблема классического параллельного доступа к переменной. По сути, происходит то, что ваш priceNumber увеличивается на 1 каждый раз, когда вы выбираете цену, но возможно, что 2 выборки возвращаются в одно и то же время, обновляют DOM в то же время и затем увеличивают в одно и то же время, но они 'снова используя то же значение priceNumber, чтобы определить, куда вставить их цену.

Самый простой способ решить эту проблему - также вернуть skinFullName вместе с вашей ценой, а затем создать карту между skinFullName и индексом. Таким образом, вы можете искать фиксированный индекс на основе skinFullName, и вам не нужно полагаться на выборки цены скина, поступающие в том же порядке, что и выборки (что в этом случае также не гарантируется).