Question

我只使用了JS和React了很短的时间，在继续forEach循环之前遇到了问题。

下面的函数glitchLib应该从状态中提取一个img源数组，遍历该数组的元素，并对每个图像进行“小故障”处理（小故障的实际过程是使用javascript库完成的）。对于每个故障图像，我想将具有原始源和故障源的2元素数组推入currentSaved[]，然后在回调中传递数组的数组。

  glitchLib() {
    const currentSaved = [];
    var array = this.state.originalFiles; 
    array.forEach(function(src) {
      var originalImage = src;
      const image = new Image();
      image.src = src; 
      image.onload = () => {
        glitch()
          .fromImage(image)
          .toDataURL()
          .then((dataURL) => {
            const dataArray = [originalImage, dataURL];
            currentSaved.push(dataArray);
          });
        };
    });
    this.props.callback(currentSaved);  
  }

如果我在setTimeout中将回调包裹大约10秒钟左右，则数组将被正确地迭代，因此js库执行“故障转移”的方式没有任何问题，应该仅返回base64图像编码。没有setTimeout，将传递一个空数组。

等待数组完全迭代的正确方法是什么（或者就此而言，有没有更好的方法可以完成这种事情）？

Answer 1

您可以使用Promise.all()等待多个Promise的完成：

const glitch = () => Promise.resolve('xyz')
function glitchLib(callback) {
  const promises = []
  const array = ['abc', 'def']
  array.forEach(src => {
    const originalImage = src
    const image = new Image()
    image.src = src
    /*image.onload = */;(() => {
      promises.push(
        glitch()
          //.fromImage(image)
          //.toDataURL()
          .then(dataURL => [originalImage, dataURL])
      )
    })()
  })
  Promise.all(promises)
    .then(currentSaved => callback(currentSaved))
}

glitchLib(x => console.log(x))

ReactJS等待array.forEach完成之前继续回调

1 个答案: