使用 JavaScript 通过 for 循环将 FB.api 调用的响应保存到数组

Question

我正在尝试编写一个脚本，1）从文本输入字段读取 FB 用户 ID将它们循环到一个数组中 2) 使用名字的每个 ID 调用 FB.api，并将返回的名字值保存到另一个数组中。 问题：由于某种原因，从 FB.api 收到的所有名字都保存到同一个数组索引位置 5。这很奇怪，因为循环应该只从索引 1 到 4。

<script type="text/javascript">
var ids = new Array();
var names = new Array();
var fields = 4;


function firstNames() {

var i;
var k;


for (i=1;i<=fields;i++)
    {
        ids[i] = document.getElementById("field"+i).value;
    }

for (k=1; k<=fields; k++)
    {
        FB.api('/'+ids[k], function(response) {
            names[k] = response.first_name;
            alert(k+' test '+names[k]);
        });
    }

}
</script>

有人遇到过类似的情况吗？任何帮助将不胜感激。

预先感谢。

Answer 1

阅读：Javascript、node.js 和 for 循环
参见：实验#7：通过建立新变量的新作用域关闭
URL： http: //blog.mixu.net/2011/02/03/javascript-node-js-and-for-loops

我和你有同样的问题，即 FB.api 获取 FOR 循环最终迭代索引...

请尝试此解决方案：

for (k=1; k<=fields; k++)
{
  // Closure with new scope establishing a new variable
  (function() {
    var index = k; // new variable
    FB.api('/'+ids[index], function(response) {
        names[index] = response.first_name;
        alert(index+' test '+names[index]);
    });
  }();
}

更新：需要注意的一件事是，此示例中的警报可能不会按顺序发生，即您可能会得到 1,4,2,3...这完全取决于每个 API 调用的网络延迟与其执行顺序有关...

Answer 2

这不是同一个 Api 调用，但我实际上遇到了类似的情况。

你必须明白 facebook api 调用是异步的。最重要的是，它很慢。因此 javascript 速度更快，并且在发送第一个响应时，您的 javascript for 循环已经完成。这就是为什么所有内容都被发送到 k=5，这是循环后 k 的值。

发生这种情况是因为 javascript 不会像 java 那样强制您在处理程序中使用最终变量。

现在你明白了，如何解决它？呵呵，抱歉，当我遇到这种问题时，我想出了一个肮脏的解决方案。

我所做的是直接在函数（响应）主体中处理代码，而不是使用中间变量。因此，作为快速修复，您可以执行相同的操作并忘记您的名称数组，或者找到更好的东西。