JS - метод выполняется последним, хотя он вызывается первым - PullRequest
Новая
       4

JS - метод выполняется последним, хотя он вызывается первым

0 голосов
/ 29 мая 2018

У меня есть эти две функции, где «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», как ноль)

Это то, что я пытаюсь отрендерить, и это генерируетизображение. 

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

Может быть потому, что это компонент Vue?Проблемы с производительностью?Или мне нужно использовать обратный вызов, может быть?

1 Ответ

0 голосов
/ 29 мая 2018

Это потому, что html2canvas($("#size-chart").get(0)) возвращает обещание (возможно, просто отображаемое), которое является асинхронным вызовом.

Таким образом, sizeChartAsImage будет выполняться, и html2canvas($("#size-chart").get(0)) будет выполняться.Пока скрипт ожидает его возврата, он продолжит работу функции setSizeChart и запустит ее.А затем он вернется к коду в обратном вызове then(canvas =>.

Вы можете вызвать setSizeChart в конце обратного вызова.Или, если вы используете ES2017 или новее, вы можете переписать sizeChartAsImage, чтобы он был асинхронным и ожидал его.

...