JQuery - for 循环中的加载元数据监听器

Question

我正在尝试创建一个循环以获取从 jQuery 数组中获取的不同音轨的持续时间。似乎在循环中添加事件监听器会覆盖 for 的第二条语句，无限循环并导致浏览器崩溃。

代码如下:

var trackSources = new Array();
trackSources[0] = "music/haken.mp3";
trackSources[1] = "music/Drive home.mp3";
trackSources[2] = "music/Luminol.mp3";

var audioPlaylist = document.createElement("audio");
audioPlaylist.preload = "metadata";

function getDurations() {

    var max = trackSources.length;

    for (var i=0; i < max ; )
    {
        audioPlaylist.src = trackSources[i];

        audioPlaylist.addEventListener('loadedmetadata', function() {
            trackDuration= audioPlaylist.duration;
            alert(trackDuration);
            i++;
        }, false);

    }

}

有什么办法解决吗？谢谢!

Answer 1

你可以试试这个:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var trackSources = new Array();
trackSources[0] = "music/haken.mp3";
trackSources[1] = "music/Drive home.mp3";
trackSources[2] = "music/Luminol.mp3";

var trackDuration = new Array();

var audioPlaylist = document.createElement("audio");
audioPlaylist.preload = "metadata";
var i = 0;

function getDurations() {
console.log('getDurations called');
var arraySize = trackSources.length;
if(i < arraySize){
    $(audioPlaylist)[0].src = trackSources[i];
    $(audioPlaylist).on('loadedmetadata',function(){
        trackDuration[i]= $(audioPlaylist)[0].duration;
        console.log('Track '+i+' - duration: '+trackDuration[i]+' seconds');
        i++;
        $(this).off('loadedmetadata');
        getDurations();
    });
}
}
getDurations();
</script>

旁注:您提到了 jQuery，但您的问题代码是纯 JS。