jQuery中if内赋值变量后外部输出undefined的问题求助

你猜的作用域其实不对哦！真正的问题是异步操作的执行顺序在搞鬼。

咱们来拆解下代码的执行流程：

1. 你先声明了area_id变量，此时它的值是undefined；
2. 进入if判断后，调用$.ajax发送GET请求——注意，这个请求是异步的，浏览器会把它丢到后台去处理，不会等着它完成，而是直接往下走；
3. 还没等AJAX请求拿到响应、执行done回调里的赋值操作，外部的console.log(area_id)就先跑了，这时候area_id自然还是undefined；
4. 等到AJAX请求成功返回后，done回调才会执行，这时候area_id才被赋值，所以回调里的console.log能正常输出。

下面给你几种靠谱的解决办法：

方案1：把依赖area_id的逻辑放进回调里（最直接） #

既然只有AJAX请求完成后area_id才有有效值，那所有需要用到它的代码都应该放在done回调里面：

var area_id;
if (area.length > 1) {
  $.ajax({
    method: 'GET',
    url: 'https://example.com/suggests/areas/?text=' + area
  })
  .done(function (response) {
    area_id = response.items[0].id;
    console.log(area_id); // 这里能正常拿到值
    // 把所有需要使用area_id的逻辑都写在这里
    handleAreaId(area_id);
  });
}

// 专门处理area_id的函数，让代码更清晰
function handleAreaId(id) {
  console.log('处理area_id:', id);
  // 在这里写你的业务逻辑
}

方案2：用Promise + async/await（更优雅的现代写法） #

如果不想写嵌套回调，可以把AJAX请求包装成Promise，再用async/await让异步代码看起来像同步的：

// 先把AJAX请求封装成Promise函数
function fetchAreaId(areaText) {
  return new Promise((resolve, reject) => {
    $.ajax({
      method: 'GET',
      url: 'https://example.com/suggests/areas/?text=' + areaText
    })
    .done(res => resolve(res.items[0].id))
    .fail(err => reject(err));
  });
}

// 在ready回调里用async/await调用
$(document).ready(async function () { 
  "use strict";
  var area = "..."; // 你的area变量
  if (area.length > 1) {
    try {
      const area_id = await fetchAreaId(area);
      console.log(area_id); // 这里能拿到值
      // 后续依赖area_id的代码直接写在这里就好
    } catch (error) {
      console.error('获取area_id失败:', error);
    }
  }
});

注意：await必须放在带async关键字的函数里，所以这里把document.ready的回调改成了async function()。

方案3：强制同步请求（不推荐） #

虽然可以通过设置async: false让AJAX变成同步，但这会阻塞浏览器主线程——请求没完成前，用户页面会卡死，体验极差，所以非常不建议用这种方式：

var area_id;
if (area.length > 1) {
  $.ajax({
    method: 'GET',
    url: 'https://example.com/suggests/areas/?text=' + area,
    async: false // 开启同步模式，不推荐！
  })
  .done(function (response) {
    area_id = response.items[0].id;
    console.log(area_id);
  });
}
console.log(area_id); // 现在能拿到值，但页面会卡顿

总结下：核心就是要明白异步操作的执行时序，别在异步任务完成前去访问还没赋值的变量。优先用方案1或方案2来处理哦！

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