Javascript XHR在for循环中同时运行

所以我有一个for循环，它通过一个变量数组，并为每个变量打开一个新的XHR连接（将图像上传到服务器）

问题是，它在所有项目中循环，并在第一次上载完成之前运行下一次上载。如果一个人同时上传一大组文件，这并不理想

有没有办法强迫循环停止，直到XHR连接完成

谢谢

见

还有更多的讨论

---

在伪代码中，加入一点jQuery：

Get list of files from upload dialog box
For each File {
    create FormData object, append File to it.
    create xhr object, set parameters (url, etc.)

    // This is the callback run whenever an upload job comletes
    xhr.onload = {  
        if there's another xhr upload queued {
            dequeue it
        }
        if there's another entry in the completed queue {
            dequeue it
        } else {
            all uploads complete: tidy up
        }
    }
    // An extra to let the user know what's happening
    xhr.onprogress {
        update whatever progress bar we have
    }
    // add jobs to two queues. The first queue contains the actual
    // upload jobs that are dequeued by the onload callback
    // Because uploads may not finish in the order they were started
    // we track the completed jobs in a second queue. The onload callback
    // also dequeues this, and if the queue is empty knows to tidy up.
    add xhr job to queue
    add no-op job to completed queue 
}
// at this point everything is queued. Start the process...
for (number of concurrent uploads) {
    dequeue an xhr job
}
// Sit back and wait... As the initial batch of xhr jobs complete
// their respective onload callbacks each start another upload job
// until they're all done. The last callback to execute turns out the lights...

因为这是异步代码，所以事情并不总是按照预期的顺序发生。onload回调在作业排队之前设置，但在作业完成后执行。你可能需要一段时间才能明白这一点

---

此pseudcode取自我为image manager项目编写的文件上传程序的jQuery实现。它使用jQuery

.queue

方法来存储和跟踪剩余的xhr作业。实际代码太复杂，无法在此处复制

您不能直接“强制”循环停止，但可以重新安排迭代以等待上一个请求完成。您可以使用某种形式的递归，而不是使用

for

循环。您可以使用同一个变量使用两个单独的for循环，但这很奇怪。在回调中开始下一次传输。随着每个文件的完成，下一个开始。但是，如果同时运行多个传输，则几乎肯定会获得更好的总体上载性能。你必须进行实验，看看什么最有效。@MikeW这似乎是解决这个问题的方法，但我无法概念化这将如何工作，你能提供一个基本的例子吗？@Mark我发布了一些伪代码来说明这个过程。它来自我为一个图像管理器项目编写的上传程序。我打算把它放在Github上，但我还没有时间。通过我的网站（在我的个人资料上）与我联系，我会给你发送一份副本。

Get list of files from upload dialog box
For each File {
    create FormData object, append File to it.
    create xhr object, set parameters (url, etc.)

    // This is the callback run whenever an upload job comletes
    xhr.onload = {  
        if there's another xhr upload queued {
            dequeue it
        }
        if there's another entry in the completed queue {
            dequeue it
        } else {
            all uploads complete: tidy up
        }
    }
    // An extra to let the user know what's happening
    xhr.onprogress {
        update whatever progress bar we have
    }
    // add jobs to two queues. The first queue contains the actual
    // upload jobs that are dequeued by the onload callback
    // Because uploads may not finish in the order they were started
    // we track the completed jobs in a second queue. The onload callback
    // also dequeues this, and if the queue is empty knows to tidy up.
    add xhr job to queue
    add no-op job to completed queue 
}
// at this point everything is queued. Start the process...
for (number of concurrent uploads) {
    dequeue an xhr job
}
// Sit back and wait... As the initial batch of xhr jobs complete
// their respective onload callbacks each start another upload job
// until they're all done. The last callback to execute turns out the lights...