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

Question

我正在尝试创建一组规则，其中来自 API 的数据在具有 6 个不同 API 的 html 页面中返回。所以我需要的是，每 5 秒显示一次新数据替换旧数据。这是我到目前为止所做的：这是小提琴：https : //jsfiddle.net/tohfz61x/3/在这里我所做的是，添加setInterval function但它没有用。在这个版本中，它一次获取所有数据并显示循环的最后一个。但我需要一次显示 1 到 6 次。所以基本上如果第一个结果是 50 美元，几秒钟后，它应该更改为另一个值（例如 30 美元），如 API 中所示。

Answer 1

您可以使用以下条件调用initLoadData()内部 a setTimeout()。

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>

Answer 2

setTimeout()API调用完成后可以调用函数

var i = 1;

initLoadData();

function initLoadData() {

  var dataURL = "https://adler.blockrize.io/data/" + i;

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      let data = JSON.parse(xhttp.responseText);

      document.getElementById("price").innerHTML = data.RewardsEarned.TotalReward;

      i = i + 1;

      if (i <= 6) {

        setTimeout(function() {

          initLoadData();

        }, 2000);

      }

    }

  };

  xhttp.open("GET", dataURL, true);

  xhttp.send();

}

<div class="transaction-section bg-dark text-white pb-4">

  <h2>Transaction History</h2>

  <div id="rewardsEarned">$<span id="price">00.00</span></div>

</div>

Answer 3

您可以使用延迟功能，只需在您的代码中进行这些更改

替换这个：

rewardsEarnedHolder.html(totalReward);

有了这个代码

rewardsEarnedHolder.html(totalReward).delay(5000);