javascript - 如何用异步代码实现顺序迭代

Question

我想实现文件(使用 XMLHttpRequest level2)顺序上传到服务器。获得了一堆附加了文件的 DOM 元素(FileAPI - W3C 草案)。我想按顺序上传(一个接着一个)，但 XMLHttpRequest 是异步工作的。小代码示例:

$thumbnails = $('queue').find('.item');
for (var i = 0, len = thumbnails.length; i < len; i++) {
  var xhr = new XMLHttpRequest();
  xhr.upload.onload = function(ev){}; // fires on upload complete
  var fd = new FormData
  fd.append('Files['+i+']', $thumbnails[i].file) // insert atached File to FormData

  xhr.open("POST", 'server_url', true) // last true means "use asynch rq"
  xhr.send(fd)
}

此代码的问题是，FOR 循环在文件上传过程中独立迭代。因此开始更多并行上传:

• 迭代开始，
  • xhr 已创建/填充，
  • 上传开始，
  • 新迭代

即使之前的上传未完成，此设计也会创建新的 xhr 对象。但我仍然想保持上传的异步范例(没有浏览器阻止、进度事件等)。只是无法弄清楚如何等待当前上传完成然后开始新的上传周期。

有什么想法吗？

Answer 1

您可以创建堆栈并递归处理请求，也可以重用相同的请求对象。

我知道，它摇滚! :) 这是您的代码:

// last in, first out.
var stack = [];

$('queue').find('.item').each(function(i, el){
    // insert atached File to FormData
    var fd = new FormData();
    fd.append('Files['+i+']', el.file);
    stack.push(fd);
});

var xhr = new XMLHttpRequest();

(function recur() {

  // fires on upload complete
  xhr.upload.onload = function(ev) {
    // do recursion until the stack is not empty
    if (stack.length) recur();
  };

  // send an asynchronous POST request
  xhr.open("POST", 'server_url', true);
  xhr.send(stack.shift());

})();