jQuery load 方法单独运行正常，封装进 setInterval 定时刷新失效

高频失效原因 #

• DOM元素匹配失效
  你之前独立编写的$('#refresh').load('devicesAuto.php')能正常运行，本质是代码执行时刚好匹配到了页面内的#refresh节点。当开启轮询后，如果devicesAuto.php返回的内容本身包含id="refresh"的DOM节点，第一次加载完成后页面会出现重复ID，jQuery选择器将无法定位到正确的目标节点，导致后续加载逻辑静默失败。
• 请求队列阻塞卡死
  1秒间隔的轮询没有做请求状态校验时，一旦遇到网络波动、接口响应超时，上一次的load请求还未返回结果，下一次定时任务就会触发，累积的挂起请求很快会触发浏览器同源请求的并发数上限，直接中断所有后续的接口请求。
• 脚本执行时序错误
  如果带setInterval的脚本块放在了jQuery库引入标签的前面，哪怕代码中写了$(document).ready，也会因为找不到全局$对象直接抛出JS运行错误，导致定时任务根本没有成功启动。

可运行的修正代码 #

$(function () {
    // 请求锁，避免并发请求堆积
    let requestLock = false;

    // 封装刷新逻辑
    const syncDeviceTable = () => {
        // 上一次请求未完成时直接跳过本次触发
        if (requestLock) return;
        requestLock = true;

        // 加载接口数据时加时间戳，规避本地缓存
        $('#refresh').load(`devicesAuto.php?t=${Date.now()}`, () => {
            // 接口请求完成后释放锁
            requestLock = false;
        });
    };

    // 页面加载完成后先执行一次同步，再启动定时轮询
    syncDeviceTable();
    setInterval(syncDeviceTable, 1000);
});

配套优化注意事项 #

• 检查devicesAuto.php返回的内容结构，不要在返回内容中嵌套与页面原有ID重复的节点，尤其是#refresh这个ID，避免出现重复ID匹配失效的问题。
• 不建议严格按照1秒的间隔做轮询，高频请求会增加服务器带宽压力，更容易触发接口限流，可根据实际需求把间隔调整到2-3秒。
• 可以在浏览器控制台查看Network面板的请求记录，确认轮询逻辑是否正常发出请求，快速定位是脚本报错还是接口响应的问题。

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