JavaScript全局数组跨函数访问异常：提交函数无法获取AJAX填充数据

你遇到的核心问题不是作用域问题（全局变量本身可以在任何函数里访问），而是AJAX请求的异步特性导致的。

为什么会拿到空数组？ #

AJAX请求是异步执行的：当你调用getAddresses()发送请求后，浏览器不会等待请求返回结果，而是直接继续执行后续代码。如果onButtonSubmit在请求完成前就被调用（比如页面加载完就绑定了按钮点击，而请求还在后台跑），此时全局数组还没被赋值，自然是空的。

举个模拟的例子：

// 全局数组
let addresses = [];

function getAddresses() {
  // 用setTimeout模拟AJAX异步请求延迟
  setTimeout(() => {
    // 请求完成后才给数组赋值
    addresses = ["北京市朝阳区", "上海市黄浦区"];
    console.log("请求完成，数组已填充");
  }, 1000);
}

function onButtonSubmit() {
  console.log(addresses); // 这里打印空数组，因为请求还没结束
}

// 执行顺序：先调用getAddresses，再直接调用onButtonSubmit
getAddresses();
onButtonSubmit();

上面代码的执行顺序是：

1. 调用getAddresses()，发送异步请求（进入等待状态）
2. 立刻执行onButtonSubmit()，此时数组还没被赋值，打印空数组
3. 1秒后请求完成，数组才被填充

解决方法 #

核心思路是：确保访问数组的代码在AJAX请求完成后再执行，有两种常用方式：

方式1：使用回调函数

把需要操作数组的逻辑放到请求完成的回调里：

let addresses = [];
let countries = [];
let streetAddresses = [];

function getAddresses(callback) {
  // 真实AJAX请求示例（以fetch为例）
  fetch('/your-api-url')
    .then(response => response.json())
    .then(data => {
      // 请求完成后赋值全局数组
      addresses = data.addresses;
      countries = data.countries;
      streetAddresses = data.streetAddresses;
      // 调用传入的回调函数，此时数组已填充
      callback();
    });
}

// 初始化时先等待请求完成，再绑定按钮事件
getAddresses(() => {
  document.getElementById('submit-btn').addEventListener('click', onButtonSubmit);
});

function onButtonSubmit() {
  console.log(addresses); // 现在能拿到填充后的数组
}

方式2：使用async/await（更直观的同步写法）

用async/await让异步代码看起来像同步执行：

let addresses = [];
let countries = [];
let streetAddresses = [];

async function getAddresses() {
  const response = await fetch('/your-api-url');
  const data = await response.json();
  addresses = data.addresses;
  countries = data.countries;
  streetAddresses = data.streetAddresses;
}

// 先等待请求完成，再绑定按钮事件
async function init() {
  await getAddresses();
  document.getElementById('submit-btn').addEventListener('click', onButtonSubmit);
}

function onButtonSubmit() {
  console.log(addresses); // 正常访问填充后的数组
}

// 启动初始化流程
init();

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