Как дождаться окончания отправки всех звонков XHR2

Question

Я сделал некоторый код для загрузки нескольких файлов из браузера на сервер, показывая также и индикаторы выполнения. Отправка вызовов XHR2 является асинхронной. Проблема в том, что я хочу вызывать некоторые функции после того, как все вызовы XHR2 завершены.

Вот очень упрощенный фрагмент моего кода:

<input id="upload" multiple="multiple" />

<script>
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);
}
</script>

Всякий раз, когда "onreadystatechange: файл загружен". печатается в консоли, я знаю, что один из файлов загружен. Но я не могу написать код с надписью "Все файлы загружены".

Спасибо за любую помощь. Я также использую jquery, если у кого-то есть решение с использованием jquery.

Answer 1

Вы знаете, сколько звонков вы делаете? Если так, то хотя бы ajax callback, вы проверяете счет. Что-то вроде

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

Answer 2

В вашем случае вам понадобится метод counter и setInterval, попробуйте это:

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
var counter = 0;

for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);      
   uploadFunc();
}

var interval = setInterval(function() {
    if(counter == files.length) {
        clearInterval(interval);
        console.log("All Files uploaded!");
    }
}, 100);

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) {
         counter += 1;
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>