Vue順序執行

我有一個使用 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);
    });
}

這是我嘗試呼叫執行以下三件事的三個函式

1. this.setTiimeSurface10()：更新TIME已添加到地圖的 ImageWMS 源圖層的引數。
2. this.map.renderSync() : 是在全域地圖物件上呼叫的 OpenLayers 方法，以確保渲染所有圖層。
3. this.myCallback() : 是提取地圖畫布并將其作為框架添加到 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});
}

uj5u.com熱心網友回復：

回答了我的另一個問題，但這里又是答案。

感謝 OpenLayers 的 Hocevar 先生的一些幫助（如果可以的話，我建議你在Github 贊助商上支持他）我得到了任何感興趣的人的答案。

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 承諾可確保回圈等待并執行 myCallback，后者將渲染的背景關系作為幀添加到 GIF 物件。

標籤：javascript Vue.js 异步 开放层

上一篇：React函式中的setState未在promise方法中更新

下一篇：Go-實作超時的最佳方式