javascript - 每 5 秒填充一次 Ajax 数据，替换旧数据 jquery

Question

我正在尝试创建一组规则，其中 API 中的数据返回到具有 6 个不同 API 的 html 页面中。所以我需要的是，每 5 秒显示一次新数据来替换旧数据。

这是我到目前为止所做的:

这是 fiddle :https://jsfiddle.net/tohfz61x/3/

我所做的是添加了setInterval函数，但它不起作用。

在此版本中，它会立即获取所有数据并显示循环的最后一个数据。但我需要一次显示 1 个，直到 6 次。

基本上，如果第一个结果是 50 美元，几秒钟后，它应该更改为 API 中的另一个值(例如 30 美元)。

Answer 1

您可以在 setTimeout() 中调用 initLoadData()，条件如下。

var value = 1;

initLoadData();

function initLoadData() {

  var ajaxTime = new Date().getTime();
  var dataURL = "https://adler.blockrize.io/data/" + value;

  $.getJSON(dataURL, function(response, status, t) {
    var rewardsEarnedHolder = $('#rewardsEarned');
    var totalReward = '<span class="price">$' + response.RewardsEarned.TotalReward + '</span>';
    rewardsEarnedHolder.html(totalReward);
    console.log(dataURL);

    value++;
    if (value <= 6) {
      setTimeout(function() {
        initLoadData(value);
      }, 2000);
    }

  });
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="transaction-section bg-dark text-white pb-4">
  <h2>Transaction History</h2>
  <div id="rewardsEarned"></div>
</div>