Заполняйте данные Ajax каждые 5 секунд, заменяя старые данные jquery

Question

Я пытаюсь создать набор правил, в которых данные из API возвращаются на html-странице с 6 различными API. Так что мне нужно, чтобы каждые 5 секунд отображались новые данные, заменяя старые.

Это то, что я сделал до сих пор:

Вот скрипка: https://jsfiddle.net/tohfz61x/3/

Вот что я сделал, добавил setInterval function, но это не сработало.

В этой версии он получает все данные за один раз и отображает последний цикл. но мне нужно отображать 1 за один раз до 6 раз.

Таким образом, в основном, если первый результат составляет 50 долларов, через несколько секунд он должен измениться на другое значение (например, 30 долларов), как в API.

Answer 1

Вы можете вызвать initLoadData() внутри 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);