多语言网站中如何在getJSON外部调用存储的语言变量？

你遇到的核心问题是AJAX请求的异步特性——$.getJSON是异步执行的：浏览器发起请求后不会原地等待响应，而是直接继续执行后续代码。这就导致你在getJSON外部打印storeKeys、storeVals时，请求还没完成，变量自然是空的；后续调用这些变量的逻辑也会因为变量未赋值而失效。

下面给你几种实用的解决方案，按推荐程度排序：

方案1：提前预加载语言文件（最推荐） #

如果语言配置是页面全局通用的，建议在页面初始化时就完成加载，而不是等到点击按钮才请求。这样后续任何逻辑都能直接使用，还能避免用户操作时的等待延迟：

// 定义全局变量存储语言配置（也可以用模块导出，根据你的项目结构调整）
let globalLang = {};

// 页面加载完成后立即预加载语言文件
$(document).ready(async function () {
    try {
        // 用await让异步请求看起来像同步，更易读
        globalLang = await $.getJSON(`cdns/json/lang_${memLang}.json`);
        console.log('语言文件加载完成:', globalLang);
    } catch (error) {
        console.error('语言文件加载失败:', error);
        // 加载失败时设置默认英文作为兜底
        globalLang = {
            "HOME": "Home",
            "ABOUT": "About",
            "CONTACT": "Contact us",
            "EMAIL": "E-mail Id",
            "CHOOSE_FILE": "Please choose at least one file"
        };
    }
});

// 点击上传按钮时直接使用预加载好的变量
$(document).on('click', '#upload', function () {
    // 部分代码
    const choosefile = globalLang.CHOOSE_FILE;
    if (!fileValue) {
        $('#loadingResult').html(choosefile);
    }
    // 其他需要语言变量的逻辑...
});

方案2：将后续逻辑放入getJSON回调 #

如果必须在点击时才加载语言文件，那就把所有依赖语言变量的代码放到getJSON的回调函数里，确保只有请求完成后才执行这些逻辑：

$(document).on('click', '#upload', function () {
    // 部分代码
    $.getJSON(`cdns/json/lang_${memLang}.json`, function (dlang) {
        console.log(dlang);
        // 直接使用dlang对象，不需要拆分成两个数组（完全没必要）
        const choosefile = dlang.CHOOSE_FILE;
        if (!fileValue) {
            $('#loadingResult').html(choosefile);
        }
        // 所有需要用到语言变量的后续代码都写在这里
    }).fail(function(error) {
        // 处理请求失败的情况
        console.error('加载语言文件失败:', error);
        if (!fileValue) {
            $('#loadingResult').html('Please choose at least one file');
        }
    });
});

方案3：用async/await优化异步代码结构 #

如果不想把代码都塞进回调里，可以利用$.getJSON返回Promise的特性，用async/await让异步代码看起来更像同步逻辑：

$(document).on('click', '#upload', async function () {
    // 部分代码
    try {
        // 等待语言文件加载完成
        const dlang = await $.getJSON(`cdns/json/lang_${memLang}.json`);
        console.log(dlang);
        
        // 后续依赖语言变量的逻辑在这里执行
        const choosefile = dlang.CHOOSE_FILE;
        if (!fileValue) {
            $('#loadingResult').html(choosefile);
        }
        // 其他代码...
    } catch (error) {
        console.error('加载语言文件失败:', error);
        // 兜底逻辑
        if (!fileValue) {
            $('#loadingResult').html('Please choose at least one file');
        }
    }
});

额外提醒 #

• 没必要把语言配置拆成storeKeys和storeVals两个数组，直接使用原始的dlang对象，通过键名（比如dlang.CHOOSE_FILE）访问值是最简洁高效的方式。
• 一定要处理请求失败的情况，避免页面出现空白或无意义的错误提示，提升用户体验。

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