仅最后一个XMLHttpRequest返回数据

Question

我正在从服务器中检索一些文件，并将它们添加到文件[]中，以便稍后阅读。但是，当我读取多张图像时，我只能从最后一张图像中获取数据。其余均为空。

      var files = [];
      var imageURLs = [];

      for(var i = 0; i < image.length; i++){
        imageURLs[i] = image[i].firstChild.nodeValue + "?t="+ Math.random();
      }

      for(var i = 0; i < imageURLs.length; i++){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", imageURLs[i]);
        xhr.responseType = 'arraybuffer';
        xhr.customURL = imageURLs[i];
        xhr.send();
        xhr.onreadystatechange = function() {
          if(this.readyState == 4 && this.status == 200){
            var index = imageURLs.indexOf(this.responseURL);
            imageURLs.splice(index, 1);
            var arrayBuffer = xhr.response;
            files.push(new File([arrayBuffer], this.responseURL.toString().split('#').shift().split('?').shift().split('/').pop()));
            if(imageURLs.length == 0){
              makeFileList(files);
            }
          }
        };
      }

我正在从XML文件中的链接。

-------------------------------------- UPDATE -------- ----------------------------

我通过制作一个单独的XMLHttpRequest数组并像这样分别处理它们来修复它：

      var imageURLs = [];
      var files = [];
      var xhrs = []; //THIS IS NEW

      for(var i = 0; i < image.length; i++){
        imageURLs[i] = image[i].firstChild.nodeValue + "?t="+ Math.random();
        //I initialized them here
        xhrs[i] = new XMLHttpRequest();
        //I set their callbacks
        xhrs[i].onreadystatechange = function() {
          if(this.readyState == 4 && this.status == 200){
            var index = imageURLs.indexOf(this.responseURL);
            imageURLs.splice(index, 1);
            var arrayBuffer = this.response;
            files.push(new File([arrayBuffer], this.responseURL.toString().split('#').shift().split('?').shift().split('/').pop()));
            if(imageURLs.length == 0){
              makeFileList(files);
            }
          }
        };
      }

      for(var i = 0; i < imageURLs.length; i++){
        //I sent them
        xhrs[i].open("GET", imageURLs[i]);
        xhrs[i].responseType = 'arraybuffer';
        xhrs[i].customURL = imageURLs[i];
        xhrs[i].send();
      }