加载多json数据

Question

var address = [ "data/somedata1.json", "data/somedata2.json", "data/somedata3.json", "data/somedata4.json", "data/somedata5.json"];

以及导入此文件的函数

function readData()
{
    var loadFile = function (filePath, done)
    {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", filePath, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onload = function () { return done(this.responseText) }
        xhr.send();
    }
    address.forEach(function (file, i)
        {
            loadFile(file, function (responseText)
            {
            jsonData[i] = JSON.parse(responseText);
            if(i === 4)
            {
                fill(jsonData);
                document.getElementById("el").innerHTML = jsonData[2].title3;
                Dosometing(jsonData[0])
            }
            })
        })

}

所有 JSON 文件的绝对大小为 150kb。问题是，有时当我在网站上运行此代码时，我得到 jsonData[0] 未定义，有时全部加载成功。这意味着所有数据都没有正确加载。我做错了什么？是否有机会更好地编写此代码以确保正确加载所有文件？

Answer 1

一个问题是，即使对于小文件，也不能保证下载按顺序完成。 最好使用单独的变量来跟踪完成的下载计数：

function readData() {
  var loadFile = function(filePath, done) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", filePath, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.onload = function() { return done(this.responseText) }
    xhr.send();
  }
  var finishedCount = 0;
  address.forEach(function(file, i) {
    loadFile(file, function(responseText) {
      jsonData[i] = JSON.parse(responseText);
      finishedCount++;
      if(finishedCount === address.length) {
        fill(jsonData[4]);
        document.getElementById("el").innerHTML = jsonData[2].title3;
        Dosometing(jsonData[0])
      }
    });
  })
}