可以访问数组的元素，但不能迭代

Question

我有一个 URL 数组，以及我从外部提取的一组数据。 URL 和数据完美地一一对应。我尝试这样做：

for (var i = 0; i < children.length; i++) {
    urls.push(children[i].data.url); 
}

for (var i = 0; i < children.length; i++) { 
    $.ajax({
         url: DATA_SOURCE,
         dataType: "jsonp",
         success: function (data2) {                           
             console.log(urls[0]);
             console.log(urls[i]);
         }
    });                        
}

第一个日志总是打印urls 数组的第一个元素。我可以将数字更改为任何其他有效索引并且它可以工作。然而，second 日志总是打印 undefined。我最初是从第二个循环中获取 url，但我把它拿出来以防万一它被证明是一个异步错误或什么的。 urls 被初始化为 Array，而不是 Object。将第二个日志从成功函数中取出（并进入 for 循环的主要范围）使其按预期执行。我很乐意将它归结为 ajax 请求以某种方式搞砸了它，但是为什么第一个日志会按预期执行？

有什么想法吗？

Answer 1

$.ajax 是异步的，这意味着当回调（成功）运行时，循环已经运行完毕，现在设置为 children.length

访问 urls[ i ]，等于 urls[ children.length 因此未定义。

一个简单的解决方法是为每次迭代创建范围

for (var i = 0; i < children.length; i++) { 
  (function( index ) {
    $.ajax({
       url: DATA_SOURCE,
       dataType: "jsonp",
       success: function (data2) {                           
         console.log(urls[ index ]);
        }
    }); 
  })( i );                       
}

Answer 2

+1 对 Pantelis 的回答，虽然只是有点迂腐的评论：没有真正需要将 整个 ajax 调用包装在 IIFE 中，只有成功回调需要引用 " i 的当前" 值，所以这样就可以了：

for (var i = 0; i < children.length; i++)
{
    $.ajax({
       url: DATA_SOURCE,
       dataType: "jsonp",
       success: ((function( index ) 
       {
           return function (data2)
           {
               console.log(urls[ index ]);
           };
       })(i)
    });
}

Answer 3

这是因为最终调用成功函数时 i 未定义。您需要将 i 的当前值传递给您正在生成的成功函数。

for (var i = 0; i < children.length; i++) { 
    $.ajax({
         url: DATA_SOURCE,
         dataType: "jsonp",
         success: (function (count) {
             return(function(data2){console.log(urls[0]); console.log(urls[count]);});        
         })(i)
    });                        
}

在这里，为每次迭代生成的成功函数略有不同，因为它记录了不同的值。