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

Question

Я сделал некоторый код для загрузки нескольких файлов из браузера на сервер, одновременно показывая progressbars. 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

Вам нужен счетчик и 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>