Заполните каждый JSON-данные в определенном интервале

Question

Я хотел бы заполнить данные, поступающие из json, с использованием $.getJSON через определенный интервал.

Я могу заполнить данные, но все приходит сразу. Что мне нужно, это показать все данные в определенном интервале (возможно, 3 сек.).

вот рабочая скрипка https://jsfiddle.net/nyzht697/

Я пытался использовать setTimeout ( function (), но все же он загружает всесразу.

$.each(transactionData, function(i, item) {

var time = '<span class="time text-light d-block">' + item.Time + '</span>';
var date = '<span class="date d-block">' + item.Date + '</span>';
var amount = '<span class="value d-block">' + item.CryptoAmount + ' ' + item.CryptoType + '</span>';
var cost = '<span class="diff text-success d-block">~' + item.Cost + '</span>';


setTimeout ( function () {
    transactionItem += '<li>' + time + date + '</li>';
  }, 4000);

});

это то, что я пытался, но оно заполняет все сразу.

Answer 1

Вы имеете в виду это?

Я сохраняю массив и длину и устанавливаю счетчик, который останавливает выполнение, когда счетчик достиг последнего элемента в массиве. Это то, что делает возврат

Показывать один элемент за вызов, пока массив не станет пустым

var ajaxTime = new Date().getTime();
var dataURL = "https://adler.blockrize.io/data/";
var cnt = 0, max;
var transactionList = $('.transaction-list');
var rewardsEarnedHolder = $('#rewardsEarned');
var cryptoEarnedTable = $('#cryptoEarnedTable');
var transactionData;

$.getJSON(dataURL, function(response, status, t) {
  transactionData = response.TransactionHistory;
  max = transactionData.length;
  var rewardEarned = response.RewardsEarned;
  var cryptoEarned = response.CryptocurrenciesEarned;
  loadData()
});

function loadData() {
  if (cnt >= max) return; // we are done with the array

  item = transactionData[cnt]; // load the next item

  var time = '<span class="time text-light d-block">' + item.Time + '</span>';
  var date = '<span class="date d-block">' + item.Date + '</span>';
  var amount = '<span class="value d-block">' + item.CryptoAmount + ' ' + item.CryptoType + '</span>';
  var cost = '<span class="diff text-success d-block">~' + item.Cost + '</span>';

  transactionItem = `<li>${date}@${time}: ${amount} </li>`;
  transactionList.append(transactionItem);
  cnt++
  setTimeout(loadData, 3000)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transaction-section bg-dark text-white pb-4">
  <h2>Transaction History</h2>
  <ul class="transaction-list mb-2"></ul>
</div>

Здесь я продолжаю поиск каждые 3 секунды

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

function loadData() {
  $.getJSON(dataURL, function(response, status, t) {
    var transactionData = response.TransactionHistory;
    var rewardEarned = response.RewardsEarned;
    var cryptoEarned = response.CryptocurrenciesEarned;

    var transactionList = $('.transaction-list');
    var transactionItem = '';
    var rewardsEarnedHolder = $('#rewardsEarned');
    var rewardsEarned = '';
    var cryptoEarnedTable = $('#cryptoEarnedTable');
    var cryptosEarned = '';

    // var interval = 0;

    $.each(transactionData, function(i, item) {

      var time = '<span class="time text-light d-block">' + item.Time + '</span>';
      var date = '<span class="date d-block">' + item.Date + '</span>';
      var amount = '<span class="value d-block">' + item.CryptoAmount + ' ' + item.CryptoType + '</span>';
      var cost = '<span class="diff text-success d-block">~' + item.Cost + '</span>';

      transactionItem += '<li>' + time + date + '</li>';

    });

    transactionList.append(transactionItem);
    setTimeout(loadData, 3000)
  });
}
loadData()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transaction-section bg-dark text-white pb-4">
  <h2>Transaction History</h2>
  <ul class="transaction-list mb-2"></ul>
</div>