如何设置在异步返回时将订单元素附加到documentFragment？

Question

我猜是个奇怪的问题……

我正在内存中构建我的 DOM 并大量使用promises。假设我在 for... 循环中有这个：

target = document.createDocumentFragment();
promises = [], pass, skip, store;

for (i = 0; i < foo; i += 1) {
    element = foo[i];

    // set promise
    promises[i] = app.setContent(element, {}, update)
        .then(function(response) {
            // HELP!
            if (pass) {
              target.appendChild(store)
              store = undefined;
              skip = undefined;
              pass = undefined;
            }
            if (response.tagName !== undefined) {
              pass = true;
            }
            if (skip === undefined && response.tagName === undefined) {
              store = response;
              skip = true;
            } else {
              target.appendChild(response);
            }
          });

  RSVP.all(promises).then(continue...

上面的循环运行3x，返回两个div标签和一个documentFragment。没有承诺，没问题，我的结构是

 <div toolbar>
 <fragment = form>
 <div toolbar>

问题是，当我转换为 async 时，我在添加项目的顺序中没有更多发言权，这迫使我执行上述愚蠢的事情，我在其中找到我的片段，将其存储在 store 中，设置一个 @ 987654330@ 参数，附加我的第一个 div，它设置 pass，这将允许我存储的 fragment 在下一个承诺“进来”时附加......真是浪费代码......

问题：
当所有项目都异步返回时，有没有办法以通用方式正确设置项目的顺序？如果没有，我该如何移动物品？由于我在内存中工作，我可以选择使用querySelector/qsAll，但我没有很多其他选择？有任何想法吗？

（并且请不要建议放入 DOM 然后随机播放 :-)）

谢谢！

Answer 1

我会用文字解释...

在发出每个异步请求时，还要在正确的位置创建一个容器，以便请求的数据在最终到达时传送。此容器通常是 <div> 或 <span>。

保留对容器的引用（通常在闭包中），以便异步响应处理程序知道哪个容器对应于哪个数据。