函数中的javascript存储设置变量

Question

我有一个文件data.json ，内容为： {"id": "foo", "value": "bar"} 。 我在同一目录中还有另一个文件index.html ，内容如下：

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var datavar;
  d3.json("data.json", function(d) { datavar = d; console.log(datavar); });
  console.log(datavar);
</script>

当我在Web浏览器中打开index.html时，第一个console.log(datavar)调用输出{id: "foo", value: "bar"} 。 第二个输出undefined 。 我的印象是，由于我在函数外部初始化了datavar ，因此一旦我们退出该函数，对它所做的更改将持续。 我如何从功能外部存储功能中的数据？

Answer 1

您的假设是正确的，即在全局级别定义的变量然后在函数中进行更改将使更改保持在所述函数之外。

但是，由于它是异步操作，因此输出为“ undefined”。 这意味着更改“ datavar”的代码在登录之前可能尚未执行。 如果在控制台日志中添加注释，即console.log('inside d3', datavar)和console.log('outside d3', datavar)您可能会惊讶地发现'outside d3'首先执行。

绝对是您想要的异步加载-因此，您应该相应地调整实际代码。 如果遇到问题，请随时提供更多详细信息。

如果您绝对需要同步加载数据，请参见以下SO答案： 如何与d3.js同步加载JSON数据？

Answer 2

您的假设是，由于变量是在函数外部初始化的，因此存储的时间长于函数的正确时间。 错误的是它们被击中的顺序。 d3.json调用一个异步函数，该函数使应用程序的其余部分在加载时保持运行。 因此，发生d3.json调用后的console.log（未定义），然后在以后的某个时间加载data.json并记录正确的信息。

如果要使用此数据，则需要等待其返回并仅在回调函数中使用它。 当前设置变量的方式可以使用，但是您必须告诉使用它的任何代码重新运行，以便它在加载文件中的数据之后运行。