如何在JavaScript中通过加载JS/JSON文件动态修改全局变量内容

问题根因 #

1. 你使用的loadjscssfile没有加载完成回调机制，调用加载函数后立刻访问数据的话，脚本还未完成下载和执行，自然无法拿到mydata变量；静态写在HTML里的script是按页面加载顺序同步执行，所以可以正常拿到数据。
2. 多次切换时间时旧的script标签会残留在页面中，若出现加载时序问题，可能会读取到旧数据，也会造成冗余资源占用。

解决方案 #

1. 改造加载函数，增加回调与旧资源清理逻辑

// 全局变量：存储当前已加载的时间数据script标签，方便后续移除
let currentTimeScript = null;
// 与你预先声明的全局变量对应，统一管理数据
let mydailydata = null;

function loadTimeData(day, hour, callback) {
    // 先移除之前加载的旧script，避免残留影响
    if (currentTimeScript) {
        currentTimeScript.remove();
    }
    // 格式化小时为4位，补前导0：比如900转为0900
    const formattedHour = hour.toString().padStart(4, '0');
    const url = `data/day${day}_${formattedHour}.js`;

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    // 加载完成后执行回调
    script.onload = () => {
        // 将数据文件里的mydata赋值到全局统一变量
        mydailydata = window.mydata;
        callback && callback(mydailydata);
    };
    // 可选：加载失败的错误处理
    script.onerror = () => {
        console.error(`数据加载失败：${url}`);
        callback && callback(null);
    };
    document.head.appendChild(script);
    currentTimeScript = script;
}

2. 调整切换时间的调用逻辑

把你原本渲染Leaflet地图的逻辑抽成公共函数，放到加载完成的回调中执行，不要在页面初始化后只执行一次渲染：

// 示例：用户选择了星期1、12点时调用
loadTimeData(1, 1200, (data) => {
    if (!data) return;
    // 这里调用你原本的地图渲染逻辑，传入拿到的data更新内容即可
    renderLeafletMap(data);
});

可选优化项 #

• 可以增加加载中状态提示，避免用户切换时间后无感知
• 若你的数据文件会频繁更新，可以在URL后加时间戳参数避免缓存：const url = \data/day${day}_${formattedHour}.js?t=${Date.now()}``，更新不频繁则无需添加，避免浪费带宽

内容的提问来源于stack exchange，提问作者Aleksander Godziło-Godlewski