如何在前一个完成后才调用函数答案

【问题标题】：How to call functions only after the completion of the previous如何在前一个完成后才调用函数
【发布时间】：2019-07-02 03:43:34
【问题描述】：

我一直在尝试获取 base64 图像的 imageData。我有 2 个函数，问题是第二个函数在第一个函数结束之前开始。

我有两个功能

frame.restoreImageDataForLayers();
frame.changeResultLayer();

首先 - 在页面上加载图像，然后将变量“layers.data”更改为该加载图像的 imageData。第二 - 使用图像的 imageData。

restoreImageDataForLayers() {
    this.layers.forEach((item) => {
      const layer = item;
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const image = new Image();
      image.onload = function drawImg() {
        context.drawImage(image, 0, 0);
        layer.data = context.getImageData(0, 0, layer.canvasSize, layer.canvasSize).data;
console.log('FIRST', layers.data');
      };
      image.src = layer.data;

    });
  }

changeResultLayer() {
    console.log('SECOND', this.layers[0].data);
  }

然后我有之前的第二个控制台日志第一个控制台日志和我的另一个必须与 imageData 一起使用的代码 - 崩溃。如何解决？

【问题讨论】：

标签： javascript image function promise async-await

【解决方案1】：

您需要将restoreImageDataForLayers 转换为一个返回promise 的函数，该promise 仅在函数中的操作完成时才解析。

restoreImageDataForLayers() {
  const layerPromises = this.layers.map(item => {
    return new Promise((resolve, reject) => {

      // All your canvas-image code here...

      image.onload = function(){

        // Your onload code here

        // Then resolve the promise for this item
        resolve()
      }
    })
  })

  return Promise.all(layerPromises)
}

为此，您需要将图像加载过程包装在一个 Promise 中。使用array.map() 创建一个包含这些承诺的数组，每个项目一个。然后使用 Promise.all() 创建一个仅在数组中的所有 Promise 都解析时才解析的 Promise。

要调用此函数，您只需这样做：

frame.restoreImageDataForLayers().then(() => {
  frame.changeResultLayer();
});

或者，如果调用者在 async 函数中，请执行以下操作：

async thatWrapperFunction(){
  await frame.restoreImageDataForLayers();
  frame.changeResultLayer();
}

【讨论】：