javascript - 有没有办法在更新列表中的 DOM 时显示 JSON 数据？

Question

我有 JSON 数据，我想一个接一个地显示一条记录。如下所示显示一条记录，然后说 5 秒后，下一条记录显示在 DOM 更新中。

我怎样才能做到这一点？就像使用 Carousel 时一样。

那是：

A Centre 0  Then next      B Centre 2
A Centre 0                 B Centre 0

let data = [
   {
      "facility_name_lims":"A Center",
      "process_delay":0,
      "lost_misplaced":0
   },
   {
      "facility_name_lims":"B Center",
      "process_delay":2,
      "lost_misplaced":0
   },
   {
      "facility_name_lims":"C Clinic",
      "process_delay":55,
      "lost_misplaced":0
   },
   {
      "facility_name_lims":"D Center",
      "process_delay":5,
      "lost_misplaced":0
   },
   {
      "facility_name_lims":"E Centre",
      "process_delay":1,
      "lost_misplaced":0
   }
];


$.each(data, function (i, item) {
    $("#ProcessingDelay").html(item.facility_name_lims + " " + item.process_delay);
    $("#LostMisplaced").html(item.facility_name_lims + " " + item.lost_misplaced);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p>Display one record from the JSON then update the next from the records.</p>

<div id="ProcessingDelay"> Processing Delay</div>
<div id="LostMisplaced"> Lost Misplaced</div>

标签： javascripthtmljquerydom

Answer 1

谷歌：js settimeout vs setinterval。

let data = [{
    "facility_name_lims": "A Center",
    "process_delay": 0,
    "lost_misplaced": 0
  },
  {
    "facility_name_lims": "B Center",
    "process_delay": 2,
    "lost_misplaced": 0
  },
  {
    "facility_name_lims": "C Clinic",
    "process_delay": 55,
    "lost_misplaced": 0
  },
  {
    "facility_name_lims": "D Center",
    "process_delay": 5,
    "lost_misplaced": 0
  },
  {
    "facility_name_lims": "E Centre",
    "process_delay": 1,
    "lost_misplaced": 0
  }
];

var i = 0;
var intervalID = setInterval(function() {
  $("#ProcessingDelay").html(data[i].facility_name_lims + " " + data[i].process_delay);
  $("#LostMisplaced").html(data[i].facility_name_lims + " " + data[i].lost_misplaced);
  i++;
  if (i === data.length) {
      clearInterval(intervalID);
  }
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ProcessingDelay"> Processing Delay</div>
<div id="LostMisplaced"> Lost Misplaced</div>