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

【问题标题】：Is there a way to display JSON data while updating a DOM from the list?有没有办法在更新列表中的 DOM 时显示 JSON 数据？
【发布时间】：2021-08-12 06:51:13
【问题描述】：

我有 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>

【问题讨论】：

标签： javascript html jquery dom

【解决方案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>

【讨论】：