javascript - 在 native JavaScript 中等待其他事情完成

Question

我正在尝试使用 JavaScript 和 HTML5 制作音频播放器。现在我遇到了错误，当我尝试更改文件，然后根据 slider 的位置播放它时，player.duration 为 NaN，因为尚未加载那么远。如果我发出警报，那么它就可以正常工作。所以基本上，如果浏览器只是勉强挂起，它就会给它足够的时间，而当它直接运行时，它不会首先完成加载。

player.src = file;
// The next command is reached before the full effect of the above line is finished
player.currentTime = (slider.offsetLeft) / trackWidth * player.duration;

那里还有其他一些东西，但本质上，我需要一种方法来稍微暂停一下，或者在第二行运行之前等待一切完成。我意识到我可以在第二行使用 setTimeout，但该行位于函数中的几个位置，所以我希望有一个“一个修复”，可以放在第一行之后。

Answer 1

您需要做的是等待音频的元数据变得可用。这可以通过等待 loadedmetadata event 来实现。并在该事件触发后在回调中执行其余代码。

player.addEventListener('loadedmetadata', function() {
    player.currentTime = (slider.offsetLeft) / trackWidth * player.duration;
    // and the remainder of your code relating to the audio element
}, false);

唯一潜在的问题是，如果文件加载速度非常快(即它已经在缓存中)，则可能会在附加事件处理程序之前触发事件。最好在添加事件监听器后分配 src 属性。