Javascript：调用函数后总是返回未定义的值[重复]

Question

var info = [];
var data = [];
var ids;

function loadData() {

  d3.json('data/res/ID.json', function (error, d) {
    ids = d.ids;
    d.ids.forEach(function (id, i) {

        d3.json('data/res/json/' + id + '.json', function (error, d) {
            info.push({
                "id": id,
                "value": d
            })
        })
    });

    initMap(ids, info);

  });


}

我只是想从几个 csv 文件中读取并在 var info 中创建一个对象数组。然后我想将数组传递给一个名为 initMap() 的函数。但是，当我在 initMap() 中使用 console.log(info) 时，它会显示一个空数组。

我真的对函数的执行顺序感到困惑。如果我想确保 var 信息在传递给 initMap() 之前完成，该怎么办？

Answer 1

似乎数据在回调中被异步推送到 info，而 initMap 在 d.ids.forEach 之后被同步调用。换句话说，d.ids.forEach 调度将数据推送到 info，并在执行调度的操作之前调用 initMap。

您将需要跟踪 d3.json('data/res/json/' + id + '.json' 回调执行（即使用计数器）并在所有回调执行后触发 initMap。

它可能看起来像（未经测试，只是试图反映这个想法）：

var itemsAmount = d.ids.length;
var cbExecuted = 0;
d.ids.forEach(function (id, i) {

        d3.json('data/res/json/' + id + '.json', function (error, d) {
            info.push({
                "id": id,
                "value": d
            });
            if (++cbExecuted === itemsAmount) initMap(ids, info);
        })
    });