Vue顺序执行

Question

我有一个使用 OpenLayers 的 Vue 2 无服务器 Web 应用程序。我运行遇到了一个有趣的编程问题，它适用于其他应用程序，我需要多次按顺序执行 3 个方法。

for(let i = 0 ; i < this.dateArraySurface10.length - 1 ; i++)
{
    waterfall([
        this.setTimeSurface10(),
        this.map.renderSync(),
        this.myCallback(),
    ],    
    function(err){
        console.log("Waterfall done",err);
    });
}

这是我尝试调用执行以下三项操作的三个函数

this.setTiimeSurface10() : 更新已添加到地图的 ImageWMS 源图层的 TIME 参数。
this.map.renderSync() : 是在全局地图对象上调用的 OpenLayers 方法，以确保渲染所有图层。
this.myCallback() : 是一个提取地图 canvas 并将其作为框架添加到 GIF 对象的函数。

我的问题是我需要这三个方法在那个序列中运行 72 次，虽然我可以用 setTimeout 对它们进行硬编码，但我需要一种更抽象的方法来做到这一点，这样我就可以让用户无论如何添加许多层并导出为 GIF。我试图在 this.map 对象上添加一个事件侦听器，但有些东西无法正常工作。

如何以编程方式确保所有三个方法以最纯粹的 Javascript 方式在 for 循环内按顺序执行？

如果有帮助，这里有两种方法：

setTimeSurface10: function () {
    if (this.currentTimeSurface10 === null) {
        this.currentTimeSurface10 = this.startTimeSurface10;
    } else if (this.currentTimeSurface10 >= this.endTimeSurface10) {
        this.currentTimeSurface10 = this.startTimeSurface10;
    } else {
        this.currentTimeSurface10 = new Date(
            this.currentTimeSurface10.setMinutes(this.currentTimeSurface10.getMinutes() + 60)
        );
    }
    this.surface10.getSource().updateParams({ TIME: this.currentTimeSurface10.toISOString().split(".")[0] + "Z" });
},
myCallback: function () {
    const mapCanvas = document.createElement('canvas');
    const divElement = document.querySelector(".map");
    mapCanvas.width = divElement.offsetWidth;//size[0];
    mapCanvas.height = divElement.offsetHeight;//size[1];
    const mapContext = mapCanvas.getContext('2d');
    Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
            if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                const matrix = transform
                                        .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
                                        .split(',')
                                        .map(Number);
                CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);
                mapContext.drawImage(canvas, 0, 0);
            }
        }
    );
    this.gif.addFrame(mapCanvas, {copy:true, delay: 200});
}

Answer 1

已在回答，但这里又是答案。

感谢 OpenLayers 的 Hocevar 先生的一些帮助（我建议您在 Github Sponsor 上支持他）我得到了任何感兴趣的人的答案。

async mapToCanvasList() {
    for(let i = 0 ; i < this.dateArraySurface10.length - 1 ; i++)
    {
        this.setTimeSurface10();
        await new Promise(resolve => this.map.once('rendercomplete', resolve));
        this.myCallback();
    }
    this.gif.on('finished', function(blob) {
        window.open(URL.createObjectURL(blob));
    });
    this.gif.render();
},
myCallback: function () {
    const mapCanvas = document.createElement('canvas');
    const divElement = document.querySelector(".map");
    mapCanvas.width = divElement.offsetWidth;//size[0];
    mapCanvas.height = divElement.offsetHeight;//size[1];
    const mapContext = mapCanvas.getContext('2d');
    Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
            if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                const matrix = transform
                                        .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
                                        .split(',')
                                        .map(Number);
                CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);
                mapContext.drawImage(canvas, 0, 0);
            }
        }
    );
    this.gif.addFrame(mapCanvas, {copy:true, delay: 200});
}

如您所见，异步呈现整个方法并为 rendercomplete 事件添加 await promise 可确保循环等待并执行 myCallback，后者将呈现的上下文作为帧添加到 GIF 对象。

Vue顺序执行

Vue sequential execution

javascript

asynchronous

openlayers

vue.js