化妝。每（）等待我使用<code>html2canvas</code>轉換html2canvas轉換元件，以DataURL

Question

，

我解析使用.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

您不能僅循環異步元素，因爲它們不會暫停循環。相反，您可以構建承諾數組並使用$.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，因爲它會在異步回調丟失（你也可以換你的異步調用的存儲值的一個功能）

結果光潔度沒有排序，但數組結果是。

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>