JS中如何检测RapidAPI新冠统计数据是否更新以避免页面日期错误变动

核心是通过本地存储记录上一次拉取的有效数据，每次请求后先做数据对比，确认有更新再修改页面内容，避免无意义的日期刷新。

修改后完整代码 #

const settings = {
  async: true,
  crossDomain: true,
  url: "https://covid-193.p.rapidapi.com/statistics?country=GEORGIA",
  method: "GET",
  headers: {
    "x-rapidapi-key": "bc0019aac3msh86f039dbf1157b6p1b7843jsn2aaad402201d",
    "x-rapidapi-host": "covid-193.p.rapidapi.com",
  },
};

$.ajax(settings).done(function (response) {
  const latestData = response.response[0];
  // 读取本地存储的上一次有效数据
  const lastRecord = localStorage.getItem('geo_covid_last_record');
  
  // 定义需要对比的核心字段，只要这几个字段变化就判定为数据更新
  const compareKeys = ['cases.total', 'deaths.total', 'tests.total', 'cases.recovered'];
  let isDataUpdated = false;

  if (lastRecord) {
    const parsedLast = JSON.parse(lastRecord);
    // 逐个对比核心字段是否有变化
    isDataUpdated = compareKeys.some(key => {
      const [parent, child] = key.split('.');
      return parsedLast[parent][child] !== latestData[parent][child];
    });
  } else {
    // 第一次加载，没有历史记录，直接判定为需要更新
    isDataUpdated = true;
  }

  // 数据没有更新就直接跳出，不修改页面
  if (!isDataUpdated) return;

  // 数据有更新，执行页面渲染逻辑
  console.log(latestData);
  $("#date").text(latestData.day);
  $("#infected").text(
    Number(latestData.cases.new || 0)
      .toString()
      .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  );
  $("#death").text(
    Number(latestData.deaths.new || 0)
      .toString()
      .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  );
  $("#tests").text(
    Number(latestData.tests.total || 0)
      .toString()
      .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  );
  $("#country").text(response.parameters.country);
  $("#recovered").text(
    Number(latestData.cases.recovered || 0)
      .toString()
      .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  );
  $("#active").text(
    Number(latestData.cases.active || 0)
      .toString()
      .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  );
  $("#totald").text(
    Number(latestData.deaths.total || 0)
      .toString()
      .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
  );

  // 把本次最新数据存入本地存储，供下次请求对比
  localStorage.setItem('geo_covid_last_record', JSON.stringify(latestData));
});

逻辑说明 #

• 用浏览器的localStorage做持久化存储，即使页面刷新也能保留上一次的记录
• 选择总确诊、总死亡、总检测、总治愈四个核心统计字段做对比，只要任意一个字段发生变化就判定为数据更新
• 新增了空值兼容处理，避免API返回null时出现NaN的显示异常
• 只有确认数据更新时才会修改页面上的日期和所有统计数值，满足需求

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