异步回调嵌套问题：循环中$.get回调复用最后一条数据

嘿，这个问题其实是JavaScript里经典的循环与异步闭包/块级作用域的坑，我来给你掰扯清楚～

问题根源：var的函数级作用域陷阱 #

你遇到的现象，本质是var的作用域特性和异步回调执行时机的冲突：

• 用var声明的变量是函数级作用域（如果不在函数里就是全局作用域），在你的$.ajax回调函数中，var thisCrewMember其实只存在一个变量实例。
• 循环会快速跑完所有8次迭代，每次迭代只是把当前人员数据赋值给同一个thisCrewMember。而$.get是异步操作，它的done回调要等模板请求完成后才执行——这时候循环早就结束了，thisCrewMember已经被最后一次迭代的赋值覆盖，所以所有回调用的都是最后一位人员的数据。

你在调试里看到的细节完全印证了这点：循环内的debugger触发8次（对应每次迭代的赋值），而done里的debugger要等循环结束后才批量触发，此时thisCrewMember已经是最后一个值了。

为什么改成const就解决了？块级作用域的魔力 #

const（包括let）是ES6引入的块级作用域变量，和var的核心区别在于：

• 每次循环迭代都会创建一个新的代码块（{}包裹的范围），const thisCrewMember会在每个块里生成一个独立的变量实例。
• 当$.get的done回调被定义时，它捕获的是当前迭代块里的那个thisCrewMember，而不是共享的单个变量。所以等回调执行时，每个回调绑定的都是对应迭代的人员数据，自然不会出现全部显示最后一条的问题。

结合你的代码场景再梳理 #

原来的问题代码（简化版） #

$.ajax({
  url: 'handler.ashx',
  success: function(crewList) {
    for (var i = 0; i < crewList.length; i++) {
      var thisCrewMember = crewList[i]; // 同一个变量，每次迭代被覆盖
      $.get('template.html').done(function() {
        // 这里的thisCrewMember是循环结束后的最后一个值
        injectPanel(thisCrewMember);
      });
    }
  }
});

改成const后的正确逻辑 #

$.ajax({
  url: 'handler.ashx',
  success: function(crewList) {
    for (var i = 0; i < crewList.length; i++) {
      const thisCrewMember = crewList[i]; // 每次迭代创建新的独立变量
      $.get('template.html').done(function() {
        // 这里的thisCrewMember是当前迭代的专属变量
        injectPanel(thisCrewMember);
      });
    }
  }
});

补充：ES6之前的解决方案（好奇的话可以看看） #

在ES6还没普及的时候，大家会用**立即执行函数（IIFE）**来模拟块级作用域，把当前迭代的变量作为参数传递进去，让回调捕获独立的变量：

for (var i = 0; i < crewList.length; i++) {
  var thisCrewMember = crewList[i];
  (function(member) {
    $.get('template.html').done(function() {
      injectPanel(member);
    });
  })(thisCrewMember);
}

本质上和用const/let的原理一致——都是给每个异步回调绑定一个独立的变量实例，避免被后续迭代覆盖。

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