JavaScript局部变量转全局变量遇阻：表单输入值无法全局访问

为什么会输出undefined？ #

你碰到的核心问题是JavaScript事件的异步执行顺序：

• 页面加载完成后，console.log(place)会立刻执行，这时候用户还没点击提交按钮，place = city这句代码根本没跑过，所以place还是初始的undefined。
• 只有当用户点击提交按钮时，submit事件的回调函数才会触发，这时候place才会被赋值为输入框的内容——但这时候你的console.log早就执行完了。

几种可行的解决方案 #

方案1：把使用变量的逻辑放到回调函数内（最直接） #

既然place的值只有在提交后才有效，那所有需要用到这个值的代码，都应该放在赋值之后执行，或者封装成函数在回调里调用：

var place; 

$('form').on('submit', function(e) {
  e.preventDefault(); 
  var city = $('input[name=city]').val(); 
  place = city; 
  // 在这里直接使用place，或者调用处理函数
  console.log(place); // 这里能正确输出
  processCity(place); // 把逻辑封装到函数里更清晰
}); 

function processCity(city) {
  // 这里写所有需要用到城市名的逻辑
  console.log(`处理城市：${city}`);
}

方案2：用Promise封装异步事件（更优雅的异步处理） #

如果你的逻辑必须在回调外部执行，可以用Promise来包装提交事件，通过async/await或者.then()来等待值的产生：

// 封装获取城市输入的异步函数
function waitForCitySubmit() {
  return new Promise((resolve) => {
    $('form').on('submit', function(e) {
      e.preventDefault();
      const city = $('input[name=city]').val();
      resolve(city); // 提交后把值传递出去
    });
  });
}

// 用async/await处理异步流程
async function handleCityInput() {
  const place = await waitForCitySubmit(); // 等待用户提交
  console.log(place); // 这里能拿到正确的值
  // 后续的逻辑都可以写在这里
}

handleCityInput();

额外建议：尽量避免滥用全局变量 #

虽然你用全局变量place的思路是可行的，但全局变量容易导致代码混乱。更推荐的方式是把相关逻辑封装在局部作用域里，或者用闭包来管理状态，减少全局污染。

内容的提问来源于stack exchange，提问作者iBim's da Michi