具有完成阶段的多个 ajax 请求的进度条.是否可以

问题描述

我有一个简单的表单，提交时通过 ajax 请求进行验证.如果表单检查正常，则发出另一个 ajax 请求来处理最初提交的数据.

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.

我想为此建立一个进度条.我发现将此代码添加到每个 ajax 请求会分别返回每个调用的进度.这使得进度条加载到 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 请求每个填充进度条的 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 调用各占总百分比的 33.33%?

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

我想我们更多地关注完成的阶段以及进度.

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

有什么想法可以在不过多伪装的情况下实现这一点吗?

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;

推荐答案

是的，有可能.您可以创建一个包含每个 ajax 调用的数组.将 元素 max 属性设置为 100/array.length.将单个 progress 事件的 evt.loaded/evt.total 除以数组 .length 以设置 的 value><progress> 元素.您还可以使用 Promise.all()、.then() 来处理从 ajax 调用返回 Promise 的函数数组并更新 <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/

这篇关于具有完成阶段的多个 ajax 请求的进度条.是否可以?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！