javascript - 在绘制 d3 图表之前检查多个异步函数是否已完成

Question

上下文:我正在尝试查询 CrisisNET API多次，以查找一段时间内每天提交的报告数量。

问题:在使用总计数组绘制 d3 图表之前如何检查所有异步函数是否已完成？

代码:

var format = d3.time.format.iso,
    min = format.parse('2014-06-01'),
    max = format.parse('2014-07-01'),
    range = d3.time.day.utc.range(min, max);

totals = [];

for (var i = 0; i < range.length - 1; i++) {

    var request = (function(before, after) {

        var url = 'http://api.crisis.net/item?'
            + '&before=' + format(before)
            + '&after=' + format(after)
            + '&placeName=Syria'
            + '&limit=0'
            + '&apikey=[apikey]';

        d3.json(url, function(error, data) {

            var total =  {

                'date': after,
                'total': data.total

            };

            totals.push(total);
        });
    }(range[i + 1], range[i]));
}

预先感谢您的帮助。我是 JavaScript 的新手，并且仍在尝试理解回调、异步函数等。

Answer 1

如果您知道预期完成多少个函数，并且每个函数都有回调，则可以使用包装函数对它们进行计数，并在它们全部执行后执行其他操作。像这样的事情:

function asyncCounter(numCalls, callback){
    this.callback = callback;
    this.numCalls = numCalls;
    this.calls = 0;
};

asyncCounter.prototype.increment = function(){
    if(this.calls++ === this.numCalls){
        this.callback();
    }
};

然后，您创建一个 asyncCounter 对象，并在每次读取 JSON 时递增它:

var myAsyncCounter = new asyncCounter(numCallsExpected, callback);

...//code outside the JSON calls
d3.json(url, function(error, data) {
    ... //code you want to execute before incrementing the counter
    myAsyncCounter.increment();
}

callback 将在 d3.json 调用中的所有代码完成后执行。