JS全局变量失效问题：设置async:false仍未解决

咱们一步步拆解你代码的执行流程，就能瞬间明白为啥my_data2是undefined了：

1. 首先声明my_data变量，此时它的初始值就是undefined。
2. 接着定义了getData和handleData函数，但这俩函数只是被“定义”了，完全没执行。
3. 这时候你直接跑了console.log('my_data2', my_data)——注意！这一步发生在调用getData()之前！AJAX请求连门都没出，my_data自然还是初始的undefined。
4. 最后才调用getData()，这时候同步AJAX请求才发起，成功后给my_data赋值，所以handleData里的my_data1能打印出数组。

你设置async:false本身没毛病（虽然同步AJAX不推荐，会阻塞页面），但问题出在打印my_data2的时机太早，根本等不到AJAX请求完成赋值。

修正方案 #

方案1：调整打印时机（最简单） #

把console.log('my_data2', my_data)移到getData()调用之后，确保请求完成后再打印：

var my_data;
function getData() {
  $.ajax({
    url: 'https://restcountries.eu/rest/v2/name/aruba?fullText=true',
    type: 'GET',
    async: false,
    success: handleData,
    error: showError
  });
}
function handleData(data) {
  my_data = data;
  console.log('my_data1', my_data);
}
function showError(err) {
  console.error('请求出错：', err);
}
getData(); // 先发起请求
console.log('my_data2', my_data); // 现在请求已完成，my_data有值了

方案2：放弃同步AJAX（更推荐） #

同步AJAX会卡住浏览器主线程，导致页面卡顿，实际项目里尽量不用。改用异步模式+Promise处理：

function getData() {
  return $.ajax({
    url: 'https://restcountries.eu/rest/v2/name/aruba?fullText=true',
    type: 'GET'
  });
}
// 用Promise链式调用处理结果，不用全局变量
getData()
  .then(function(data) {
    console.log('my_data1', data);
    console.log('my_data2', data); // 直接在这里使用数据
  })
  .catch(function(err) {
    console.error('请求出错：', err);
  });

这样既不会阻塞页面，代码逻辑更清晰，还能避免全局变量带来的潜在问题。

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