Javascript 全局数组在 JSON 结果函数中不可见

Question

我有一个全局数组，在一个函数中我调用了地理编码器 API。问题是该数组在结果函数中不可见。我收到错误消息:

Uncaught TypeError: Cannot set property 'address' of undefined

这是代码:

var locationsArray = new Array();

function GetAddress(){
  for(var i=0;i<locationsArray.length;i++)
    $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng="+locationsArray[i].position.lat()+','+locationsArray[i].position.lng(), function (result) {
      locationsArray[i].address = result.results[0].formatted_address;
    });
  console.log(locationsArray);
}

知道为什么吗？谢谢。

Answer 1

TL;DR

你为什么不使用 .each() ？无论如何，你似乎都在使用 jQuery ...

function GetAddress() {
  $.each(loationsArray, function(i, v) {
    $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng="
               + v.position.lat() + ',' + v.position.lng(),
       function (result) {
          v.address = result.results[0].formatted_address;
       }
    );
    console.log(v);
  });
}

...诚然未经测试。但是，如果我正确地“音译”了它，那么您的 v 应该在该实现中正确确定范围。

<小时/>

这并不是说您的回调看不到 locationsArray。如果是这种情况，您的错误将提示 locationsArray 或 locationsArray 的属性 0 未定义。

真正的麻烦是，您的回调引用了 for 循环范围内的 i 。在最后一次迭代之后，它实际上将 i 增加到 locationsArray.length。循环条件经过测试，失败，然后退出循环。但是，i 仍然是 locationsArray.length —— 一个从未存在过的值。 (不过，在相关问题中，也可以在回调触发之前修改集合。)

举个例子:

var arr = [1,2,3];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i, arr, arr[i]);
  }, i * 100);
}

Chrome 控制台将显示以下内容:

> 3 [1, 2, 3] undefined
> 3 [1, 2, 3] undefined
> 3 [1, 2, 3] undefined

为了修复我们的示例，我们将“范围限定”对特定项目的引用，并将该放入回调中。像这样的事情:

var arr = [1,2,3];
for (var i = 0; i < arr.length; i++) {
  // create a scope
  (function() {
    var v = arr[i];
    setTimeout(function() {
      console.log(v);
    }, i * 100);
  })();
}

...控制台显示:

> 1
> 2
> 3