我是一个新手，试图用JavaScript做一些我认为很简单的事情，但是我在计时方面遇到了很多问题。我有一个音轨列表(在本示例中为3个，但可以是任意数量)，我想从每个文件中提取“持续时间”元数据。我需要最终的代码以适合现有的“for”循环，该循环正在处理与每个音频有关的其他数据。
在实验中，我可以获取单个音频文件的持续时间，如日志所示:-
loading track1.mp3
Meta data for audio 1 loaded
duration of audio 1 = 390.321633 seconds
但是，如果我将代码包装在“for”循环中，则只会得到列表中最后一个文件的持续时间，而这种情况发生在for循环完成执行之后。
loading track1.mp3
loading track2.mp3
loading track3.mp3
Meta data for audio 4 loaded
duration of audio 4 = 286.171429 seconds
我已经尝试过使用函数的各种排列，嵌套函数以及对回调的尝试(但我仍然难以理解)，但我无可救药。
谁能提供仅JavaScript的解决方案(最好提供注释，以帮助我了解正在做的事情)？我不想使用Jquery，这样我就不会试图同时理解和学习两件事，但是如果使用它是唯一的解决方案，那就去吧。
这是我的代码
<body>
<div id="div1"></div>
<script>
var aud1 = document.createElement("audio");
aud1.id="audio1";
document.getElementById("div1").appendChild(aud1);
aud1.controls=true;
aud1.onloadedmetadata = function() {
console.log("Meta data for audio "+a+" loaded");
var d = document.getElementById("audio1");
console.log("duration of audio " + a + " = " + d.duration + " seconds");
}
for (a=1;a<4;a++) {
console.log("loading track" + a + ".mp3")
aud1.src="track"+a+".mp3";
}
</script>
</body>
最佳答案
解决了。
用简单的计数器替换了for循环，该计数器在事件处理程序中进行了更新。
<body>
<div id="div1"></div>
<script>
var a=0;
var aud1 = document.createElement("audio");
document.getElementById("div1").appendChild(aud1);
aud1.onloadedmetadata = function() {
console.log("Meta data for audio "+a+" loaded");
var d = document.getElementById("audio1");
console.log("duration of audio "+a+" = " + d.duration + " seconds");
a++
if(a===3)return
console.log("loading track"+a+".mp3");
aud1.src="track"+a+".mp3";
};
aud1.id="audio1";
aud1.controls=true;
aud1.autoplay = false;
console.log("loading track"+a+".mp3");
aud1.src="track"+a+".mp3";
</script>
</body>
现在这给出了正确的顺序:
loading track0.mp3
Meta data for audio 0 loaded
duration of audio 0 = 390.321633 seconds
loading track1.mp3
Meta data for audio 1 loaded
duration of audio 1 = 303.882449 seconds
loading track2.mp3
Meta data for audio 2 loaded
duration of audio 2 = 286.171429 second