在 xhr onprogress 中查找两个异步 ajax 请求的结果

Question

我正在尝试在 ajax 请求响应文本中查找图像并获取 src url 以在另一个 ajax 请求中使用。

我需要知道加载每个图像的进度，并在我的进度栏中显示此进度的结果。 但是你可以看到 image1 是否加载了 10%； 和 image2 20%。

我的结果从 20% 下降到 10% 。 我的进度条会后退，然后前进。

有什么帮助吗？ 或者这是一个好的解决方案？

parseResult: function(result, navNumber) {
  var self = this;
  var imagesMatter = $(result).find('img');
  var imagesLength = imagesMatter.length;

  // if there is any image in ajax request then fetch imgs using ajax for show progress bar
  if (imagesLength >= 1) {
    var i = 0,
      complete = 0,
      temp = 1;
    navigation.progress.fadeIn(50);

    imagesMatter.each(function() {
      var $this = $(this);
      var URL = $this.attr('src');

      $.ajax({
        url: URL,
        xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = parseFloat(evt.loaded / evt.total).toFixed(1);
              temp = complete + (percentComplete / imagesLength);
              console.log(parseInt(temp * 100) + '%');
              navigation.progress.html(parseInt(temp * 100) + '%');
            }
          }, false);
          return xhr;
        },
        complete: function() {
          complete = temp;
          
          i++;
          if (i == imagesLength) {
            self.closeLoading(navNumber);
          }
        }
      });
    });
  } else {
    return;
  }
}

Answer 1

这里我已经删除了你的完整变量，因为我不明白它的目的是什么，并为每个请求添加了一个局部变量 lastPercent，它将记住它是特定图像请求的最后一个进度百分比，等等新更新我们将添加新的百分比并删除旧的百分比......我希望这个逻辑对你来说很清楚......

parseResult: function(result, navNumber) {
  var self = this;
  var showPercent;
  var imagesMatter = $(result).find('img');
  var imagesLength = imagesMatter.length;

  // if there is any image in ajax request then fetch imgs using ajax for show progress bar
  if (imagesLength >= 1) {
    var i = 0,
      temp = 1;
    navigation.progress.fadeIn(50);

    imagesMatter.each(function() {
      var $this = $(this);
      var URL = $this.attr('src');
      var lastPercent = 0;

      $.ajax({
        url: URL,
        xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = parseFloat(evt.loaded / evt.total).toFixed(1);
              temp = temp + (percentComplete / imagesLength) - lastPercent;
              lastPercent = (percentComplete / imagesLength);
              showPercent = temp/imagesLength;
              console.log(parseInt(showPercent * 100) + '%');
              navigation.progress.html(parseInt(showPercent * 100) + '%');
            }
          }, false);
          return xhr;
        },
        complete: function() {
          i++;
          if (i == imagesLength) {
            self.closeLoading(navNumber);
          }
        }
      });
    });
  } else {
    return;
  }
}