javascript - 竞争条件 : Trying to play a video before it loads React

Question

我正在使用 ReactJS 开发视频播放器。基本上，我已经设置了一个基于 cookie 的介绍视频，它是可以跳过的。跳过时，我希望我的主视频自动开始播放。我这样做的方式看起来像这样(问题出在 setTimeout() 部分，我知道这没有意义)

  skipIntro() {
    if (this.state.index === 0) {
        this.handleVisit(MAX_COOKIES_INTRO);
        this.setState({
            index: ++this.state.index,
        });
        this.videoRef.updatePlaybackTime(0);
        setTimeout(() => {
                            this.videoRef.play();
                          }, 0);
    }
}

如果我不使用 setTimeout，则 this.videoRef.play(); 不会执行。起初我以为这是因为它在主视频加载之前被异步调用。因为我在等待 0ms，所以我很困惑。为什么这行得通？我真的更愿意在没有 setTimeout 调用的情况下执行此操作。

Answer 1

setTimeout 有点欺骗，它不会在它的时间后立即执行，而是在超时后将函数添加到队列中。在0ms的情况下，不是立即执行，而是立即加入当前队列。

这并不一定意味着它将立即执行，而是将函数添加到队列中，其他调用可能正在等待执行。如果没有超时，它可能会在需要进行任何其他调用之前执行。参见 this MDN page了解更多。

在您的情况下，这可能意味着当您在没有 setTimeout 的情况下调用时主视频播放所需的内容未完成，但在使用 setTimeout 时，您仍然延迟执行。

您还可以查看以下任一 StackOverflow 帖子:

What is setTimeout doing when set to 0 milliseconds?

Why is setTimeout(fn, 0) sometimes useful?