Promise.all 多次动态超时

Question

我正在尝试找出最好的方法来等待我的所有 'setTimeout' 函数完成，然后再继续我的代码中的下一个操作，但我找不到执行此操作的方法。

试图提取一个函数来生成一个承诺列表，我可以为之哭泣直到所有问题都得到解决，但有些事情并不顺利。

ngOnInit() {
    if (this.item) {
      this.flag = true;
      let p = Promise.all(this.helperFunc(this.item));
      this.flag = false;
    }
}

helperFunc(data) {
  data.forEach((word: any[]) => {
    word.forEach((item: any) => {
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(item.letter);
          resolve(true);
        }, item.timing);
      });
    });
  });
}

这里是一个可能到达 'helperFunc' 函数的数据集的例子：

[
  [
    {
      "letter": "S",
      "timing": 500
    },
    {
      "letter": "e",
      "timing": 765
    },
    {
      "letter": "a",
      "timing": 1113
    },
    {
      "letter": "r",
      "timing": 1418
    },
    {
      "letter": "c",
      "timing": 1744
    },
    {
      "letter": "h",
      "timing": 1874
    },
    {
      "letter": "i",
      "timing": 1985
    },
    {
      "letter": "n",
      "timing": 2176
    },
    {
      "letter": "g",
      "timing": 2304
    }
  ],
  [
    {
      "letter": " ",
      "timing": 2408
    },
    {
      "letter": "f",
      "timing": 3769
    },
    {
      "letter": "o",
      "timing": 3869
    },
    {
      "letter": "r",
      "timing": 3957
    }
  ],
  [
    {
      "letter": " ",
      "timing": 4092
    },
    {
      "letter": "t",
      "timing": 4226
    },
    {
      "letter": "h",
      "timing": 4329
    },
    {
      "letter": "e",
      "timing": 4433
    }
  ],
  [
    {
      "letter": " ",
      "timing": 4545
    },
    {
      "letter": "s",
      "timing": 5141
    },
    {
      "letter": "o",
      "timing": 5245
    },
    {
      "letter": "l",
      "timing": 5733
    },
    {
      "letter": "u",
      "timing": 6123
    },
    {
      "letter": "t",
      "timing": 6399
    },
    {
      "letter": "i",
      "timing": 6507
    },
    {
      "letter": "o",
      "timing": 6583
    },
    {
      "letter": "n",
      "timing": 6743
    }
  ]
]

标志永远不会更改为 'false'。

感谢帮助:)

Answer 1

您必须将一组承诺传递给 Promise.all 函数。

您可以使用 p.then(...) 到运行代码，只要所有承诺都将得到解决

ngOnInit() {
    if (this.item) {
      this.flag = true;
      const promises = this.createPromises(this.item);
      Promise.all(promises).then(() => this.flag = false);
    }
}

private createPromises(data: any[]) {
  return data.flatMap(word => word.map(item => this.createPromise(item)));
}

private createPromise(word: any) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(word.letter);
      resolve(true);
    }, word.timing);
  });
}

Answer 2

这是您的代码，稍作修改。希望有用。

// Make this function async
async ngOnInit() {
    if (this.item) {
      this.flag = true;
      let p = await Promise.all(this.helperFunc(this.item));
      // Insert await here
      this.flag = false;
    }
}

helperFunc(data) {
  // Make the promises holder
  const promises = [];
  
  data.forEach((word: any[]) => {
    word.forEach((item: any) => {
      // Put the newly created promise in a variable
      const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(item.letter);
          resolve(true);
        }, item.timing);
      });
      // Push the in the array
      promises.push(promise);
    });
  });
  // return the promises array
  return promises;
}

Promise.all 多次动态超时

Promise.all on multiple dynamic timeouts

javascript

settimeout

promise

async-await