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

Posted 2023-05-09

【中文标题】有没有办法在更新列表中的 DOM 时显示 JSON 数据？

【英文标题】：Is there a way to display JSON data while updating a DOM from the list?

【发布时间】：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>

【参考方案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>