如何在前端处理NFL赛事API返回新旧数据交替的问题？

核心思路 #

通过存储上一次处理过的有效赛事数据，对比当前返回数据的关键字段（剩余比赛时间、球队比分等），仅在数据确认为更新状态时才执行处理逻辑。

实现代码 #

首先在全局作用域定义变量存储历史数据：

// 存储最后一次处理过的有效赛事数据
let lastValidGameData = null;

修改原有AJAX请求的回调逻辑：

$.ajax({
    url: 'https://api.myfantasyleague.com/2022/export?TYPE=nflSchedule&W=&JSON=1',
    type: "GET",
    dataType: 'json',
    success: function (data) {
        if (data.hasOwnProperty("error")) {
            console.log("No Schedule Exists")
        } else {
            // 判断是否为新数据的核心逻辑
            const isNewData = !lastValidGameData 
                // 首次请求无历史数据，直接视为新数据
                || (data.gameSecondsRemaining === "0" && lastValidGameData.gameSecondsRemaining !== "0")
                // 赛事结束状态（剩余时间0），且历史数据未记录结束状态
                || data.gameSecondsRemaining < lastValidGameData.gameSecondsRemaining
                // 直播中剩余时间递减，视为更新数据
                || JSON.stringify(data.team) !== JSON.stringify(lastValidGameData.team);
                // 球队比分、状态等核心数据变化，视为更新数据

            if (isNewData) {
                // 此处写入新数据的处理逻辑
                console.log("新赛事数据:", data);
                // 深拷贝更新历史数据，避免引用污染
                lastValidGameData = JSON.parse(JSON.stringify(data));
            } else {
                console.log("旧数据，跳过处理");
            }
        }
        data = null;
    }
});

逻辑说明 #

• 历史数据存储：使用全局变量lastValidGameData记录最后一次处理的有效数据，确保每次判断都有基准。
• 深拷贝处理：通过JSON.parse(JSON.stringify(data))实现深拷贝，避免直接赋值导致的引用关联问题，保证历史数据不会被当前数据修改。
• 多维度判断：覆盖首次请求、赛事结束、直播时间推进、球队数据变化四种场景，确保不会遗漏任何有效更新，同时过滤重复的旧数据。

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