javascript - 等待ajax完成

Question

我有这样的代码:

var links="";
function upload(file){
   var fd = new FormData();
   fd.append("image", file); // Append the file 
   // Create the XHR (Cross-Domain XHR FTW!!!)
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "http://someapi.com");
   xhr.onload = function() {
      // Big win!
      // The URL of the image is:         
        links += "[IMG]"+JSON.parse(xhr.responseText).upload.links.original+"[/IMG]\n";                 
        //showResult(JSON.parse(xhr.responseText).upload.link);
   }
   // Ok, I don't handle the errors. An exercice for the reader.
   // And now, we send the formdata
   xhr.send(fd);
}
function catchFiles(files){
    nfiles = files.length;
    //var links="";
    for(var i=0;i<nfiles;i++){
        upload(files[i]);
    }                       
}
function showResult(links){     
    document.getElementById('div_result').innerText = links;                    
}

我想要的是如何等到catchFiles完成(上传完成所有文件)之后，showResult将被调用。

有什么解决办法吗？

谢谢

Answer 1

我找不到我提到的 jQuery 功能(也许是我想象的)，所以我想出了另一个答案:

添加变量ajaxcounter并将其设置为您要发送的文件数，您可以在上传时计算它们，但这可能会带来在所有请求开始之前它达到0的风险，您最好对值进行硬编码，或者如果是动态设置的，则将所有准备好的 XHR 存储在一个数组中，并在您知道拥有所有 XHR 时发送它们。

然后在您的上传函数中执行此操作:

xhr.onreadystatechange = function () {
    if(xhr.readystate == 4) {
        // Process the responseText
        ajaxDidFinish();
    }
}

并将其设为ajaxDidFinish函数:

function ajaxDidFinish() {
    ajaxCounter--;
    if(ajaxCounter == 0) {
        // All your requests should be ready now
    }
}

希望对你有帮助，我没有测试过。