使 .each() 等待将元素转换为 DataURL

Question

我正在使用html2canvas 转换html2canvas，

我正在使用.each 解析html，然后将元素传递给html2canvas。在元素转换为DataURL 之后。我将它推送到数组content。

$('.itinerary-section-detail').each(function( index, element ) { 
                 setTimeout(function() {
                   console.log(element);
                       html2canvas(element).then(function(canvas) {
                            element.appendChild(canvas);
                             elem  = canvas.toDataURL();
                              var item = {};
                              item["image"] = elem;
                              item["width"] = 595;
                              content.push(item);
                          }); 
                  }, 4000);
            });

但问题在于将元素转换为 DataURL 的时间会有所不同。这就是为什么元素的顺序是随机的。所以我需要等到一个元素被转换为DataURL，将它推入content数组，然后从.each进入下一个元素。

请在这里给我建议一个方法。试过setTimeout，没用。

Answer 1

您不能只循环异步元素，因为它们不会暂停循环。相反，您可以构造一组 Promise 并使用 $.when。然后，一旦所有承诺解决，您提供的回调将被调用：

var promises = $('.itinerary-section-detail').map(function(index, element) {
  console.log(element)
  return html2canvas(element).then(function(canvas) {
      element.appendChild(canvas)
      var elem = canvas.toDataURL()

      return {
        image: elem,
        width: 595
      }
    })
}).get()

$.when.apply(null, promises).then(function() {
  var content = [].slice.call(arguments)
  console.log(content)
})

Answer 2

这显示了我在评论中所说的话。我用超时和随机延迟模拟了异步。

在示例中，IIFE 仅用于跟踪 index，因为它会在异步回调中丢失（您也可以将异步调用包装在存储值的函数中）

结果finish不排序，但数组结果是。

var content = [];

$('div.kadd').each(function( index, element ) { 
    console.log('launching: ' + element.innerHTML);
    (function(i){ setTimeout(function() {
        console.log('finishing: ' + element.innerHTML);
        content[i] = element.innerHTML;
    }, (Math.random() * 100) + 1); })(index);
});

setTimeout(function() {
    console.log('result: ', content);
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="kadd">A</div>
<div class="kadd">B</div>
<div class="kadd">C</div>
<div class="kadd">D</div>
<div class="kadd">E</div>
<div class="kadd">F</div>
<div class="kadd">G</div>