如何等待所有XHR2发送呼叫完成

我已经完成了一些代码，可以将多个文件从浏览器上传到服务器，同时显示进度条。 XHR2发送调用是异步的。 问题是我希望在所有XHR2发送调用完成后调用一些函数。

这是我的代码的一个非常简化的片段：

  var files = document.getElementById("upload").files; for (var i = 0, length = files.length; i < length; i++) { var file = files[i]; var uploadFunc = function (arg) { return function () { processXHR(arg); }; }(file); uploadFunc(); } function processXHR(file) { var normalizedFileName = getNormalizedName(file.name); var url = 'upload_file/'; var formData = new FormData(); formData.append("docfile", file); var xhr = new XMLHttpRequest(); var eventSource = xhr.upload; eventSource.addEventListener("progress", function (evt) { var position = evt.position || evt.loaded; var total = evt.totalSize || evt.total; console.log('progress_' + normalizedFileName); console.log(total + ":" + position); $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%'); }, false); eventSource.addEventListener("loadstart", function (evt) { console.log('loadstart'); }, false); eventSource.addEventListener("abort", function (evt) { console.log('abort'); }, false); eventSource.addEventListener("error", function (evt) { console.log('error'); }, false); eventSource.addEventListener("timeout", function (evt) { console.log('timeout'); }, false); xhr.onreadystatechange = function (evt) { if (xhr.readyState == 4) { console.log('onreadystatechange: File uploaded.'); } }; xhr.open('post', url, true); xhr.send(formData); }  

每当“onreadystatechange：File uploaded”。 在控制台打印，我知道其中一个文件已完成上传。 但我无法编写任何会说“所有文件已上传”的代码。

谢谢你的帮助。 我正在使用jquery，以防有些人使用jquery有一个解决方案。

Answer 1

你知道你打了几个电话吗？ 如果是这样，至少ajax回调，你检查计数。 就像是

 if (ajaxCallCount === ajaxCallsLength) { // Do stuff involving post all ajax calls } else { ajaxCallCount++; } 

Answer 2

在你的情况下你需要一个计数器和setInterval方法，试试这个：