JS - 方法最后执行，即使它首先被调用

Question

我有两个函数，其中"form"是Vue对象的名称：

form.sizeChartAsImage();
form.setSizeChart();

这是所述函数的代码：

setSizeChart: function () {
for (i = 0; i < this.columns.length; i++) {
this.product.size_chart.push({
position_x: 0,
position_y: i,
value: this.columns[i],
})
for (j = 0; j < this.data.length; j++) {
for (var key in this.data[j]) {
if(key === this.columns[i]) {
this.product.size_chart.push({
position_x: j+1,
position_y: i,
value: this.data[j][key],
})
}
}
}
}
}
sizeChartAsImage: function() {
html2canvas($("#size-chart").get(0)).then(canvas => {
canvas.toBlob (blob => {
var sizechartImg = document.createElement('img');
url = URL.createObjectURL(blob);
sizechartImg.src = url;
this.product.size_chart_image = sizechartImg;
debugger;
}, 'image/png');
}) 
}

尽管如此，第二个函数首先被执行(调试器首先进入(，然后其余的代码运行;表单被提交，最后，sizeChartAsImage(( 被执行，不会导致任何影响(因为表单是在 "size_chart_image" 作为 null 提交的

(这就是我试图渲染的，它确实生成了图像。

<demo-grid
:data="data"
:columns="columns"
id="size-chart">
</demo-grid>

可能是因为它是 Vue 组件吗？性能问题？或者我可能需要使用回调吗？

Answer 1

这是因为html2canvas($("#size-chart").get(0))返回了一个承诺(可能只是一个 thenable(，这是一个异步调用。

因此，sizeChartAsImage 将运行，html2canvas($("#size-chart").get(0))将执行。当脚本等待返回时，它将继续设置SizeChart函数并运行它。然后它将返回到then(canvas =>回调中的代码。

您可以在回调结束时调用 setSizeChart。或者，如果您使用的是 ES2017 或更高版本，则可以将 sizeChartAsImage 重写为异步并等待它。