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))正在返回一个承诺（可能只是一个可承受的），这是一个异步调用。

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

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

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

1 个答案: