在xhr onprogress中查找兩個異步ajax請求的結果

Question

我正在嘗試在ajax請求響應文本中查找圖像並獲取在另一個ajax請求中使用的src url。

我需要知道加載每個圖像的進度，並在進度條中顯示此進度的結果。 但是，正如你可以看到如果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; 
    } 
}