设置为每30分钟执行的Ajax GET请求为何每次页面加载都重复触发

问题根因 #

• 核心存储逻辑缺失：你代码里仅调用addDataToStorage(data)存储数据，没有同步将当前读取时间写入localStorage的LTime字段，导致每次页面加载时LTime始终为空，直接触发读取逻辑。
• 时间计算逻辑完全错误：用小时差值判断30分钟间隔完全不符合需求：
  • 例如10:30存储数据，11:00打开页面，小时差为1，你判断条件是differ > 1才触发更新，此时30分钟间隔已到但不会触发；
  • 跨天场景下小时差会出现负数，逻辑完全失效；
  • 应该用时间戳差值判断是否超过1800000毫秒（30分钟）。
• 逻辑运算符使用错误：所有非空判断都错误使用了||（或），例如if (runtimerid != null || runtimerid != "")永远返回true，if (localstoragesettime != null || localstoragesettime != "")也永远为真，逻辑完全失控。
• 定时器清理方法误用：你用setTimeout创建定时器，却用clearInterval清理，完全无法清除旧定时器，会导致多个定时器叠加运行。
• 分支逻辑漏洞：当localStorage的data为空但LTime有值时，现有逻辑不会触发数据读取，此时页面拿不到有效数据。
• 变量规范问题：epochdate、differ、ajaxRequest均未声明直接使用，变成全局变量可能引发未知冲突，exctime定义为字符串，虽然JS会隐式转换，但不符合规范。

修复方案 #

首先修改getData的成功回调，确保读取数据后同时存储时间到LTime，然后重写config的时间判断逻辑，修正所有逻辑运算符、定时器清理错误。

修复后的完整代码如下：

let currentRequest = 0;
let runtimerid = null;
const exctime = 1800000; // 改为数字类型

$(window).on("load", function () {
    if ($(".cookiealert").hasClass('show')) {
        $("#data .popup-main").addClass("cookie-accept");
    }
    else {
        $("#data .popup-main").removeClass("cookie-accept");
    }
});

$(document).ready(function () {
    config();
});

function getData() {
    if (currentRequest === 0) {
        const ajaxRequest = $.get({
            url: "/sample.txt",
            cache: false
        })
        .done(function (data) {
            if (data) { // 删掉原有语法错误的多余分号
                addDataToStorage(data);
                // 新增：存储当前时间戳到LTime
                localStorage.setItem("LTime", JSON.stringify({
                    ltime: new Date().getTime()
                }));
                currentRequest = 1;
            }
            else {
                console.log("data empty");
            }
        })
        .fail(function (data, statusTxt, xhr) {
            console.log("Error: " + xhr.status + ": " + xhr.statusText);
        })
    }
}

function config() {
    const currentTime = new Date().getTime();
    const localstoragedata = localStorage.getItem("data");
    const localstoragesettime = localStorage.getItem("LTime");
    
    // 只要数据为空、时间为空、时间差超过30分钟、存储内容解析失败，任意满足一个就重新读取
    let needRefresh = false;
    if (!localstoragedata || !localstoragesettime) {
        needRefresh = true;
    } else {
        try {
            const lastTime = JSON.parse(localstoragesettime).ltime;
            if (currentTime - lastTime >= exctime) {
                needRefresh = true;
            }
        } catch (e) {
            needRefresh = true;
        }
    }

    if (needRefresh) {
        getData();
    }

    // 统一重置定时器，避免重复设置
    if (runtimerid) {
        clearTimeout(runtimerid); // 修正为匹配setTimeout的清理方法
    }
    runtimerid = setTimeout(function () {
        currentRequest = 0;
        getData();
    }, exctime);
}

注：如果addDataToStorage函数本身已经包含了存储LTime的逻辑，请检查该函数是否存在写入失败的问题，比如键名写错、值格式不对等。

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