使用setInterval定时拉取API更新HTML表格时内容重复追加问题

你当前的代码每次拉取到新数据后，使用+=操作符直接往tbody的innerHTML后追加新行，不会清空上一次渲染的旧内容，所以才会出现表格行不断累加的问题。同时在循环中频繁操作DOM也会产生不必要的性能开销。

只需要调整渲染逻辑：每次渲染新数据前先清空原有内容，优先把所有行的HTML拼接完成后一次性赋值给tbody的innerHTML即可，既能实现内容覆盖更新，也能提升渲染性能。

const api_url = "https://api.wazirx.com/api/v2/market-status";
async function get_data_from_api() {
  const response = await fetch(api_url);
  const data = await response.json();
  const markets = data["markets"];
  const assets = data["assets"];
  const marketLen = markets.length;
  const assetLen = assets.length;
  // 初始化空字符串存储所有行的HTML
  let tableHtml = '';

  for (let i = 0; i < marketLen; i++) {
    for (let j = 0; j < assetLen; j++) {
      if (markets[i]['baseMarket'] == assets[j]['type'] && markets[i]['quoteMarket'] == "inr") {
        const name = assets[j]['name'];
        const symbol = assets[j]['type'];
        const currency = markets[i]['quoteMarket'];
        const price = markets[i]['buy'];
        // 拼接当前行到字符串，不直接操作DOM
        tableHtml += `<tr><td>${name}</td><td>${symbol}</td><td>${currency}</td><td>${price}</td></tr>`;
      }
    }
  }
  // 一次性赋值覆盖原有内容
  document.getElementById('details').innerHTML = tableHtml;
}
get_data_from_api();
setInterval(get_data_from_api, 1000);

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