JS全局变量currency在函数外部取值为undefined问题求助

提前致歉，这是个常见问题，但我试了所有方法都解决不了！我想把变量currency设为全局变量，在countryInfo函数内赋值，函数里能正常获取值，但外部它的值是undefined。代码如下：

var currency; 

// ----- 获取国家名称和代码以填充信息模态框的函数 -----//
function countryInfo(countryName) {
    $.ajax({
        url: "assets/geojson/countryBorders.geo.json",
        type: "GET",
        dataType: "json",
        data: {

        },
        success: function(result) {
            let features = result["features"];

            let countryFeature = findFeatureFromName(countryName);
            let code = JSON.stringify(countryFeature.properties.iso_a2)
            let countryCode = JSON.stringify(countryFeature.properties.iso_a2).replace(/"/g, "")

            console.log(code)
            console.log(countryCode)

            $.ajax({
                url: "assets/php/countryInformation.php",
                type: 'POST',
                dataType: 'json',
                data: {
                    country: countryCode
                },
                success: function(result) {
                    console.log(result);
                    console.log(JSON.stringify(result));

                    let capitalCity = (result['data'][0]['capital']);
                    console.log(capitalCity)
                    currency = (result['data'][0]['currency']);
                    console.log(currency)
                    // ... 后续代码
                }
            });
        }
    });
}

console.log(currency)

问题原因 #

核心是AJAX异步执行机制：外部的console.log(currency)是同步执行的，而AJAX请求会在后台异步处理，不会阻塞后续代码。也就是说，外部的console.log会在AJAX请求完成、success回调触发并给currency赋值之前就执行，所以此时currency还是初始的undefined。

解决方法 #

方法1：将依赖currency的逻辑放到AJAX回调内 #

所有需要使用currency的代码，都要放在赋值它的success回调内部，确保代码在currency有值后再执行：

var currency; 

function countryInfo(countryName) {
    $.ajax({
        // ... 第一个AJAX配置
        success: function(result) {
            // ... 中间处理代码
            $.ajax({
                // ... 第二个AJAX配置
                success: function(result) {
                    currency = result['data'][0]['currency'];
                    console.log(currency); // 此处能正常获取值
                    // 把所有需要用currency的逻辑写在这里
                    handleCurrency(currency);
                }
            });
        }
    });
}

function handleCurrency(curr) {
    // 这里写处理currency的业务逻辑
    console.log(curr);
}

方法2：用Promise/async-await简化异步流程 #

把AJAX请求封装成Promise，通过async-await让异步代码写法更接近同步逻辑：

var currency; 

// 封装第一个AJAX为Promise
function fetchCountryBorder() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "assets/geojson/countryBorders.geo.json",
            type: "GET",
            dataType: "json",
            success: resolve,
            error: reject
        });
    });
}

// 封装第二个AJAX为Promise
function fetchCountryInfo(countryCode) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "assets/php/countryInformation.php",
            type: 'POST',
            dataType: 'json',
            data: { country: countryCode },
            success: resolve,
            error: reject
        });
    });
}

// 用async函数处理异步流程
async function countryInfo(countryName) {
    try {
        const borderData = await fetchCountryBorder();
        const features = borderData["features"];
        const countryFeature = findFeatureFromName(countryName);
        const countryCode = JSON.stringify(countryFeature.properties.iso_a2).replace(/"/g, "");
        
        const countryData = await fetchCountryInfo(countryCode);
        currency = countryData['data'][0]['currency'];
        console.log(currency); // 此处能获取值
        // 后续使用currency的逻辑写在这里
    } catch (err) {
        console.error('请求失败:', err);
    }
}

// 调用函数后，在then中处理后续逻辑
countryInfo("目标国家名").then(() => {
    console.log(currency); // 此处能拿到赋值后的值
});

方法3：设置AJAX为同步（不推荐） #

可以给AJAX配置添加async: false，强制请求同步执行，但这会阻塞浏览器线程，导致页面卡顿，仅适合调试场景：

var currency; 

function countryInfo(countryName) {
    $.ajax({
        url: "assets/geojson/countryBorders.geo.json",
        type: "GET",
        dataType: "json",
        async: false, // 改为同步请求
        success: function(result) {
            // ... 中间处理代码
            $.ajax({
                url: "assets/php/countryInformation.php",
                type: 'POST',
                dataType: 'json',
                async: false, // 改为同步请求
                data: { country: countryCode },
                success: function(result) {
                    currency = result['data'][0]['currency'];
                }
            });
        }
    });
}

countryInfo("目标国家名");
console.log(currency); // 现在能获取到值

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