Question

在我的html，css和vanilla js项目中，我有一个getWorldChartsData，它显示了四个如下图：

我想在等待图表加载时显示一个加载微调器，但是我遇到了问题。

这是为这些图表检索数据的功能：

function getWorldChartsData() {
  var elems = document.querySelectorAll('.charts__loading-spinner');
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'block';
  }
  chartsData.forEach(function (chartData, index) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        console.log(elems);
        for (var i = 0; i < elems.length; i++) {
          elems[i].style.display = 'none';
        }
        const res = JSON.parse(xhr.response);
        chartData.data = res.Data.Data.map(function (d) {
          return d.high;
        }).filter(function (d, i) {
          return [0, 4, 9, 13, 17, 20, 23].includes(i);
        });

        drawWorldPriceCharts();
        updateAJAXLoaders();
      }
    };
    
    xhr.open('GET', chartData.apiURL, true);
    xhr.send();
  });
}

如您所见，我正在尝试通过将其display更改为block和none来切换显示加载微调器。

这是图表的HTML：

         <ul class="charts__chart-cards">
            <li class="charts__chart-card positive-change">
              <div class="chart__loading-spinner" class="center">
                <img src="assets/images/loading-spinner.svg" alt="loading-spinner">
              </div>
              <div class="charts__chart-symbol-container">
                <img
                  data-ajax="icon_BTCUSDT"
                  data-format="src"
                  class="ajax-load charts__chart-symbol-icon"
                />
                <h4
                  class="ajax-load charts__chart-symbol-name"
                  data-ajax="symbol_BTCUSDT"
                >
                  ETH/USDT
                </h4>
              </div>
              <div class="charts__chart-prices-container">
                <span
                  class="ajax-load charts__chart-price"
                  data-ajax="volume_BTCUSDT"
                  data-format="currency"
                  data-currency="$"
                  >5678</span
                >
                <span
                  class="ajax-load charts__chart-price-change"
                  data-ajax="change_BTCUSDT"
                  >+1.945%</span
                >
              </div>
              <div class="ct-chart charts__chartist-world-price"></div>
            </li>
          </ul>

请让我知道是否需要更多信息来解决此问题。

编辑：我在html中删除了三个图表的代码，以使其更简短易读。只需知道还有3个li元素（像这样的元素），每个元素都可以绘制一张图表。

Answer 1

我猜这是ChartsData.forEach内部元素的for循环。由于for循环尝试使用elems [index] .style.display ='none';，此foreach循环中ChartsData的第一项将不会为所有加载程序设置任何显示。相反，代码如下：

function getWorldChartsData() {
  var elems = document.querySelectorAll('.charts__loading-spinner');
 
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'block';
  }

  chartsData.forEach(function (chartData, index) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {                
        elems[index].style.display = 'none';

        const res = JSON.parse(xhr.response);

        chartData.data = res.Data.Data.map(function (d) {
          return d.high;
        }).filter(function (d, i) {
          return [0, 4, 9, 13, 17, 20, 23].includes(i);
        });

        drawWorldPriceCharts();
        updateAJAXLoaders();
      }
    };
    
    xhr.open('GET', chartData.apiURL, true);
    xhr.send();
  });
}

在加载图表时显示加载微调器的问题

1 个答案: