javascript - 在 Promise 中解决 Promise

问题描述

我遇到了一个问题，我有一个 react-native 应用程序，我有一组动作来显示视频（我之前记录了这些动作）。

我对所有动作都有一个 for 循环，需要等待视频达到某个时间戳才能触发动作。为此，我使用一个开关来识别我的所有操作，并在内部等待一个承诺，以便在良好的时间戳触发操作。

这是我的代码：

  isTimestampReached = (timestampToWait) => {
    console.log(
      `timestampToWait: ', ${timestampToWait}, currentTime: ${this.videoPlayerRef.controlButtonRef.getCurrentTime()}`,
    );
    return new Promise((resolve, reject) => {
      if (
        timestampToWait <
          this.videoPlayerRef.controlButtonRef.getCurrentTime() + 0.05 &&
        timestampToWait >
          this.videoPlayerRef.controlButtonRef.getCurrentTime() - 0.05
      ) {
        console.log('timestamp Reached !');
        resolve(true);
      } else {
        setTimeout(this.isTimestampReached, 100, timestampToWait);
      }
    });
  };

  previewRecording = async () => {
    this.resetPlayer();
    const {recordedActions} = this.state;
    console.log('recordedActions: ', recordedActions);
    for (const action of recordedActions) {
      console.log('action', action);
      switch (action.type) {
        case 'play':
          console.log('launch play');
          // if (await this.isTimestampReached(action.timestamp)) {  // this is the same as the line under
          await this.isTimestampReached(action.timestamp).then(() => {
            this.videoPlayerRef.setState({
              paused: false,
            });
            console.log('setPlay');
          });
          break;
        case 'pause':
          console.log('launch pause');
          await this.isTimestampReached(action.timestamp).then(() => {
            console.log('set Pause');
            this.videoPlayerRef.setState({
              paused: true,
            });
          }),
            console.log('pause outside loop');
          break;
        case 'changePlayRate':
          console.log('changePlayRate');
          this.videoPlayerRef.setState({
            playRate: action.playRate,
          });
          break;
        default:
          console.log(`case ${action.type} not handled`);
      }
    }
  };

和日志：

我们可以看到我留在里面for loop，switch因为我没有得到console.log('pause outside loop');。但正如你所看到的，我也不明白console.log('set Pause');。所以这意味着我的 Promise 没有解决。

我认为问题在于在承诺中启动承诺，因为对于第一种情况（播放），它直接起作用。但我不知道如何解决这个问题。

预先感谢社区

PS：我只放了 javascript 标签，因为我认为这与 react 或 react-native 无关。

标签： javascript

解决方案

这意味着我的 Promise 没有解决。我认为问题在于在承诺中启动承诺。

的确。在的 executor 回调中new Promise，您只调用setTimeout但从不调用resolve()or reject()。100 毫秒后的isTimestampReached调用确实创建并返回了它自己的承诺，原始的“外部”承诺永远不会被解决。你可以通过这样做来解决这个问题

setTimeout(() => {
  resolve(this.isTimestampReached(timestampToWait);
}, 100);

但是使用async/await进行轮询要容易得多：

async isTimestampReached(timestampToWait) {
  while (true) {
    const currentTime = this.videoPlayerRef.controlButtonRef.getCurrentTime();
    console.log(`timestampToWait: ${timestampToWait}, currentTime: ${currentTime}`);
    if (timestampToWait < currentTime + 0.05 &&
        timestampToWait > currentTime - 0.05) {
      console.log('timestamp Reached !');
      return true;
    }
    await new Promise(resolve => {
      setTimeout(resolve, 100);
    });
  }
}

（你可以重构它以使用更好的循环条件，但你明白了）。

javascript - 在 Promise 中解决 Promise

问题描述

解决方案

推荐阅读