問題描述

我有一個簡單的表單，提交時通過 ajax 請求進(jìn)行驗證.如果表單檢查正常，則發(fā)出另一個 ajax 請求來處理最初提交的數(shù)據(jù).

I have a simple form which when submitted validates via an ajax request. If the form checks out ok, then another ajax request is made to process the data originally submitted.

我想為此建立一個進(jìn)度條.我發(fā)現(xiàn)將此代碼添加到每個 ajax 請求會分別返回每個調(diào)用的進(jìn)度.這使得進(jìn)度條加載到 100%，兩次，很快.

I want to build a progress bar for this. Ive found that adding this code to each ajax request returns the progress for each call separately. That makes the progress bar load to 100%, twice, quickly.

是否有可能例如兩個 ajax 請求每個填充進(jìn)度條的 50%?...所以 ajax 請求 1 將填充到 50%，第二個將從 51% 填充到 100%?還是瘋了?

Is it possible for example for two ajax request to each fill 50% of the progress bar?... So ajax request 1 will fill up to 50% and the second will fill from 51% to 100%? Or is that crazy?

或者如果三個 ajax 調(diào)用各占總百分比的 33.33%?

Or if three ajax calls each being responsible for 33.33% of the total percentage?

我想我們更多地關(guān)注完成的階段以及進(jìn)度.

I guess we are more looking at stages of completion as well as progress.

有什么想法可以在不過多偽裝的情況下實現(xiàn)這一點嗎?

Any ideas how this could be achieved without too much faking it?

var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (evt) {
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log('percent uploaded: ' + (percentComplete * 100));
    }
}, false);
//Download progress
xhr.addEventListener("progress", function (evt) {
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log('percent downloaded: ' + (percentComplete * 100));
    }
}, false);
return xhr;

推薦答案

是的，有可能.您可以創(chuàng)建一個包含每個 ajax 調(diào)用的數(shù)組.將 元素 max 屬性設(shè)置為 100/array.length.將單個 progress 事件的 evt.loaded/evt.total 除以數(shù)組 .length 以設(shè)置 的 value><progress> 元素.您還可以使用 Promise.all()、.then() 來處理從 ajax 調(diào)用返回 Promise 的函數(shù)數(shù)組并更新 <progress> 元素.

Yes, it is possible. You can create an array containing each ajax call. Set <progress> element max attribute to 100/array.length. Divide evt.loaded / evt.total of individual progress event by array .length to set value of <progress> element. You could also use Promise.all(), .then() to process array of functions returning a Promise from ajax call and update <progress> element.

html

<label></label>
<progress value="0" min="0" max="100"></progress>

javascript

var progress = document.querySelector("progress");
var url = "/echo/html/";

function request(url) {
var len = arr.length;
return new Promise(function(resolve, reject) {
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", function(evt) {
    if (evt.lengthComputable) {   
      var percentComplete = ((evt.loaded / evt.total) * (progress.max / len)) 
                            / len;
      progress.value += percentComplete;
      console.log(progress.value, percentComplete);
      if (evt.total === evt.loaded) {
        requests += 1;
      }
      if (progress.value == progress.max && requests === len) {
        progress.previousElementSibling.innerHTML = "upload complete";
        // you could call `resolve()` here if only interested in
        // `upload` portion of request
        alert("upload complete");
      }
    }
  }, false);
  xhr.onload = function() {
     resolve(this.responseText)
  };
  xhr.onerror = reject;
  xhr.open("POST", url, true)
  xhr.send("html=" + Array(100000).fill(1).join(""));
  })
}

var arr = [], requests = 0;
arr.push(request, request, request);
Promise.all(arr.map(function(req) {
  return req(url)
}))
.then(function(data) {
  console.log(data);    
})
.catch(function(err) {
  console.log(err)
})

jsfiddle https://jsfiddle.net/v2msL7hj/3/

這篇關(guān)于具有完成階段的多個 ajax 請求的進(jìn)度條.是否可以?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！