JavaScript同步方法与jQuery $.get方法问题：键盘触发请求后数据异常

嘿，我来帮你搞定这个问题！你遇到的核心问题其实是异步操作的执行顺序搞混了，咱们一步步说：

为什么cities[0]输出不符合预期？ #

$.get是jQuery封装的异步AJAX请求，它不会等着服务器返回数据再执行后面的代码。也就是说，你调用$.get之后，浏览器立刻就跑去执行last = valNow、console.log(cities[0])这些代码了——这时候服务器的响应还在路上呢，cities数组根本还没被新数据更新，自然输出不符合预期。

给你拆解下代码的实际执行顺序：

1. 用户输入触发keyup事件
2. 获取当前输入值valNow，判断符合条件
3. 发送$.get请求（请求发出去了，但没拿到结果）
4. 直接执行last = valNow和打印cities[0]（这里的cities还是旧值或者空的）
5. 过一会儿服务器返回数据，才会执行$.get的回调函数，更新cities数组

怎么修复这个问题？ #

把所有依赖cities新数据的代码，都挪到$.get的回调函数里面去，确保只有当数据回来后才处理这些逻辑：

$('#search').on('keyup', function () { 
    var valNow = $('#search').val(); 
    if (last !== valNow && valNow !== '') { 
        console.log(valNow + ' / ' + i); 
        //向服务器查询城市数据
        $.get(path + '/' + strategy() + '/' + valNow, function (data, status) { 
            console.log(status); 
            if (status === 'success') { 
                cities = data; // 这里直接赋值就行，不用先清空
                // 生成结果列表的代码移到这里，确保用的是最新的cities数据
                var items = []; 
                console.log(cities[0]); 
                // 这里继续写生成items的逻辑
            } 
        }, 'json'); 
        //更新last值
        last = valNow; 
    }
});

聊聊JavaScript同步方法与jQuery $.get的差异 #

同步操作（Synchronous） #

• 同步代码是按顺序“排队执行”的：必须等上一行代码完全执行完，才会轮到下一行。比如咱们平时写的变量赋值、for循环，都是同步操作。
• 要是用同步AJAX（比如原生XMLHttpRequest设置async: false），会直接卡住浏览器——在请求完成前，用户点啥都没反应，体验极差，现在几乎没人这么用了。

jQuery $.get（异步AJAX） #

• $.get是典型的异步操作：发送请求后，浏览器该干嘛干嘛，不会傻等服务器回复。等服务器把数据送回来，再触发回调函数处理结果。
• 异步的好处就是不阻塞页面，用户可以正常操作，这也是现代前端的标准做法。
• 如果你觉得回调函数写着麻烦，也可以用Promise风格的.then()链式调用，代码会更清爽：

$.get(path + '/' + strategy() + '/' + valNow, 'json')
  .done(function(data) {
    cities = data;
    var items = [];
    console.log(cities[0]);
    // 处理结果列表的逻辑放这里
  })
  .fail(function() {
    console.log('哎呀，请求失败了');
  });

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