javascript - 为什么我会看到重复的 JavaScript 异步响应？

Question

我试图理解为什么我会看到以下内容:

我在 for 循环内触发多个异步请求，然后简单地打印出响应。这是我正在做的事情的一个非常简化的版本:

function getStuff(){
   var singers = ['marley','matthews','johnson','buffett'];
   for(lastname in singers){
       var lastName = singers[lastname];
       log("Making request for "+ singers[lastname]);
       makeAsyncRequest(singers[lastname], function(response){
               //this is the callback when the async request returns
               log("RESPONSE - "+lastName+": "+response);
       });
   }
}

如果我同步运行代码(async: false)，我每次都会得到以下预期结果:

Making request for marley
Making request for matthews
Making request for johnson
Making request for buffett
RESPONSE - marley: bob
RESPONSE - johnson: jack
RESPONSE - matthews: dave
RESPONSE - buffett: jimmy 

当我异步运行时，我看到如下结果。我知道回复可能会乱序。但我不明白的是，当它们无序返回时，为什么我会看到重复的值？例如，我可能会看到:

Making request for marley
Making request for matthews
Making request for johnson
Making request for buffett
RESPONSE - marley: bob
RESPONSE - johnson: dave
RESPONSE - matthews: dave
RESPONSE - buffett: jimmy 

注意到“dave”似乎返回了两次？我会理解值“jack”和“dave”是否交换，如下所示:

Making request for marley
Making request for matthews
Making request for johnson
Making request for buffett
RESPONSE - marley: bob
RESPONSE - johnson: dave
RESPONSE - matthews: jack
RESPONSE - buffett: jimmy 

但我不明白为什么回调中的“响应”参数似乎两次设置为相同的值？我在这里忽略了一些基本的东西吗？

感谢您的帮助!

Answer 1

循环没有自己的作用域。问题是，只有一个 lastName 变量，当异步请求返回时，其内容并不总是您在迭代中分配给它的内容。

您应该阅读并理解how the scope in JavaScript works .

解决方案可能是循环中的额外闭包:

function getStuff(){
   var singers = ['marley','matthews','johnson','buffett'];
   for( lastname in singers ) {
       function( lastName ) {
           log( "Making request for "+ lastName );
           makeAsyncRequest( lastName, function(response) {
                   //this is the callback when the async request returns
                   log("RESPONSE - "+lastName+": "+response);
           } );
       }( singers[lastname] );
   }
}