javascript - 使 .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 .一旦所有的 promise 都解决了，你提供的回调将被调用:

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)
})