如何在JavaScript中为API返回结果正确实现setInterval定时更新功能

核心问题排查与修复方案 #

你代码里的问题主要集中在4个点，修改后即可正常运行定时更新：

• headers语法错误：settings.headers需要是键值对格式，原代码直接写两个字符串属于语法错误，会导致AJAX请求直接报错无法发出，你需要把示例里的占位内容替换为实际的请求头键值对，比如"Accept": "application/json"这类格式。
• 错误覆盖表格表头：你直接给整个标签设置innerHTML，会把原本写死的表头行完全覆盖，第一次渲染后表头就消失，需要拆分表头和数据渲染区域。
• 无错误捕获逻辑：接口跨域、鉴权失败、返回格式错误都会导致请求失败，没有错误捕获的话无法感知问题，看起来就像定时器没运行。
• 固定间隔可能导致请求堆积：如果网络较慢，5秒内上一个请求还没返回，下一个请求就会触发，容易出现数据顺序错乱的问题。

---

修改后的代码 #

HTML代码

给表格新增单独的tbody标签用来承载动态渲染的数据，保留固定表头：

<table>
  <thead>
    <tr>
      <th>NAME</th>
      <th>LTP</th>
      <th>CHANGE</th>
      <th>CHG %</th>
      <th>OPEN</th>
      <th>HIGH</th>
      <th>LOW</th>
      <th>CLOSE</th>
      <th>30 DAY ROI</th>
      <th>1 YR ROI</th>
      <th>UPDATED ON</th>
    </tr>
  </thead>
  <tbody id="shares-body">
  </tbody>
</table>

JavaScript代码

调整请求配置、渲染逻辑，改用链式setTimeout实现更稳定的定时更新，添加错误捕获：

const settings = {
  async: true,
  crossDomain: true,
  url: "https://datasource.com/price?list",
  method: "GET",
  // 修改为正确的键值对格式请求头，替换成你实际的请求头内容
  headers: {
    "Accept": "application/json",
    "Authorization": "你的实际鉴权信息"
  }
};

// 封装数据请求函数
function fetchData() {
  $.ajax(settings)
  .done(function(response) {
    let sdata = '';
    $.each(response, function(key, value) {
      sdata += '<tr>';
      sdata += '<td>' + value.symbol + '</td>';
      sdata += '<td>' + value.lastPrice + '</td>';
      sdata += '<td>' + value.change + '</td>';
      sdata += '<td>' + value.pChange + '</td>';
      sdata += '<td>' + value.open + '</td>';
      sdata += '<td>' + value.dayHigh + '</td>';
      sdata += '<td>' + value.dayLow + '</td>';
      sdata += '<td>' + value.previousClose + '</td>';
      sdata += '<td>' + value.perChange30d + '</td>';
      sdata += '<td>' + value.perChange365d + '</td>';
      sdata += '<td>' + value.lastUpdateTime + '</td>';
      sdata += '</tr>';
    });
    // 只替换tbody的内容
    $('#shares-body').html(sdata);
  })
  .fail(function(error) {
    // 这里可以自定义报错提示，方便排查问题
    console.error('数据请求失败：', error);
  })
  .always(function() {
    // 不管请求成功失败，都在5秒后触发下一次请求，避免请求堆积
    setTimeout(fetchData, 5000);
  });
}

// 页面加载后立即触发第一次请求
fetchData();

---

内容的提问来源于stack exchange，提问作者Abdul Shaikh