为什么我的javascript承诺停留在“待决”的状态？
为什么我的javascript承诺停留在“待决”的状态？
提问于 2015-12-17 14:11:37
我有一个复杂的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被绘制，而不是随后的其他图像。用于绘制SVG的Promise被挂起.即使内部javascript都被执行。到底怎么回事？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-17 14:25:11
如果您只想在加载了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中添加了第二个参数，即承诺构造函数中的resolve函数。
现在，在promise.then中的回调在img.onload被触发之前不会被调用
工作小提琴 --在小提琴中，我没有直接调用setTimout，而是将其放在一个setTimout中，以表明在承诺得到实际解决之前，.then不会被执行
Stack Overflow用户
发布于 2015-12-17 14:14:58
您应该解决的承诺。承诺文档应该是有用的。
var promise = new Promise(function(resolve, reject){
drawSwatch(document.getElementById("mySwatch"));
resolve();
});
promise.then(function(){
ctx.drawImage(document.getElementById("myImg",0,0,150,150));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34336663
复制相关文章
相似问题
腾讯云开发者
