為什么我的javascript Promise卡住為“待處理”？

Question

我有一個繪制到畫布上的復雜的SVG，需要完成此任務才能繪制其他對象。 這是一個模擬這個的小提琴：

https://jsfiddle.net/1hucuLg9/1/

//draw svg
var promise = new Promise(function(){
  drawSwatch(document.getElementById("mySwatch")); 
  //not typo, canvas context is referenced inside this function due to xml complexity in this fiddle 
});
//draw image
promise.then(function(){
  ctx.drawImage(document.getElementById("myImg",0,0,150,150));
});

您會在小提琴中注意到，僅繪制了SVG，之后沒有繪制其他圖像。 即使內部javascript全部執行，用於繪制SVG的Promise也停留在待處理狀態。 這是怎么回事？

Answer 1

您應該解決的承諾。 Promise 文檔應該很有用。

var promise = new Promise(function(resolve, reject){
  drawSwatch(document.getElementById("mySwatch"));
  resolve();
});
promise.then(function(){
  ctx.drawImage(document.getElementById("myImg",0,0,150,150));
});

Answer 2

如果你想添加myImg只有一次內部的圖像drawSwatch加載-你可以這樣做

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

//hard code variables for example
var vw=300, vh=200, x=20, y=50, w=250, h=50; rx=10, ry=5, bg="#fae", theta=15, midptX=100, midptY=120, blur=5;

//helper function to draw swatch objects
function drawSwatch(currentSwatch, resolve){ // extra parameter
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+vw+'" height="'+vh+'">'+
    '<defs>'+
    '<filter id="f1">'+
    '<feGaussianBlur in="SourceGraphic" stdDeviation="'+blur+'" />'+
    '</filter>'+
    '</defs>'+
    '<rect class="shape" x="0" y="0" width="'+w+'" height="'+h+'" rx="'+rx+'" ry="'+ry+'" transform="translate('+x+','+y+') rotate('+theta+','+midptX+','+midptY+')" fill="'+bg+'" filter="url(#f1)"></rect>'+
    '</svg>';

    //now draw the svg to canvas
    var svg_data = encodeURIComponent(data);
    // create a dataURI version
    var url = 'data:image/svg+xml; charset=utf8, ' + svg_data;
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img, 0, 0, vw, vh);
      resolve(); // call the passed in resolve function
    }
    img.src = url;
}

//draw svg
var promise = new Promise(function(resolve){ 
  drawSwatch(document.getElementById("mySwatch"), resolve); // call drawSwatch passing in the resolve function
});

promise.then(function(){
  ctx.drawImage(document.getElementById("myImg"),0,0,150,150);
});

向drawSwatch添加了第二個參數，這是promise構造函數的resolve函數

現在img.onload的回調將不會被調用，直到img.onload

工作小提琴 -在小提琴，而不是直接調用的決心，我已經把它放在一個setTimout，向人們展示.then沒有執行，直到承諾實際上是解決