Javascript For Loop - 播放列表中的连续 Ajax 调用

请帮忙！！当我搜索这个时，我看到了很多混合的结果，没有一个适用于这里。我的目标基本上是将随机和动态填充的歌曲列表转换为播放列表，以便每首歌曲一个接一个地播放，并且 youtube 或 soundcloud 的 iframe 按顺序被 ajaxed。

我有一个简单的歌曲列表，从youtube和soundcloud api填充，输出到无序列表中。当列表中的每首歌曲加载到浏览器中时，其锚标签被赋予一个 id。

//List Item
echo "<a id='"" . $i . "'" href='"javascript:void(0)'" onclick='"play_clicked('youtube',".$i.",".$song_count.")'">
                            <li class = '"song'">";

列表中的第一首歌曲获得 id 0，第二首、1 以此类推。每首歌曲的媒体 ID 也会在加载时一次"推送"到 javascript 数组上，以便歌曲锚标签的 id 对应于数组中保存歌曲媒体 ID 的键。

echo 
'<script type="text/javascript">
track_id_array.push("'.$vid_id.'");
</script>';

我创建了一个在点击歌曲时调用的 javascript 函数：

function play_clicked(api_type,clicked_key,song_count)

该函数接收 api 类型 - soundcloud 或 youtube 的参数、保存点击媒体 ID 的锚点 ID 或数组键，然后接收列表中有多少首歌曲。有一个 for 循环来循环访问媒体 ID 数组：

for (var i=clicked_key; i<=song_count; i++){

因此，我从点击歌曲的 id 开始循环，目标是继续迭代点击歌曲之后的歌曲。首先，我检查数组中是否存在媒体 ID：

if(window.track_id_array[i])

如果存在，它应该保存媒体的 ID - 示例 youtube ID - 6_8ZZtL6qmM。然后我检查它是 soundcloud 还是 youtube 歌曲，根据哪个，我将带有 ajax 的媒体 id 发送到一个 php 脚本，该脚本会将 id 嵌入到 soundcloud 或 youtube 的 html5 iframe 嵌入小部件中，如下所示：

$vid_id = $_GET[id];
//Youtube player embed
echo '<iframe width="498" height="280" src="http://www.youtube.com/embed/'.$vid_id. '?autoplay=1" frameborder="0" allowfullscreen></iframe>
';

然后我把这个 html 返回到我的主页内的div，歌曲将在相应的小部件中播放。我想象实现播放列表目标的方式是从循环中单击的歌曲的 id/键开始，从数组中检索该键的媒体 ID，检查 api 类型，进行正确的 ajax 调用，设置歌曲长度的超时，然后在歌曲播放完成后让循环继续到数组中的下一个键， 这样它就会从列表中的下一首歌曲或数组中的 id 重新开始该过程。

Javascript真的不是我的强项，我讨厌我必须为此使用客户端代码。我的问题是，我在这里描述的方法是否可行，还是我以错误的方式这样做？我只想在循环中一个接一个地进行 ajax 调用，这样它们就不会同时发生。这是我的全部功能，我得到了一些奇怪的结果。它播放列表中的最后一首歌曲，并跳过所有其他歌曲。任何解释也许为什么？再说一次，我真的不太擅长javascript，非常感谢帮助！！

//play clicked track and those following
function play_clicked(api_type,clicked_key,song_count){
function showPlayTrack() {
                    if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var outLink = xhr.responseText;
                    }
                    else {
                        var outLink = "There was a problem with the request" + xhr.status;
                    }
                    }
                    var vis = parent.document.getElementById("play_content");
                    vis.innerHTML = outLink;
                    setTimeout(300000);
}   

for (var i=clicked_key;i<=song_count;i++){
    if(window.track_id_array[i]){
        if(api_type == "scloud"){
                var soundcloud_id = window.track_id_array[i];
                if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
                }
                else {
                    if (window.ActiveXObject) {
                        try {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) { 
                        }
                    }
                }
                if (xhr) {
                    xhr.onreadystatechange = showPlayTrack;
                    xhr.open("GET", "getsoundcloud.php?streamurl="+soundcloud_id, true);

                }
                else {
                    alert("Sorry, but I could't create an XMLHttpRequest");
                }

        }else if (api_type == "youtube"){

            var vid_id = window.track_id_array[i];
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
                }
                else {
                    if (window.ActiveXObject) {
                        try {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) { 
                        }
                    }
                }
                if (xhr) {
                    xhr.onreadystatechange = showPlayTrack;
                    xhr.open("GET", "getyoutube.php?streamurl="+vid_id, true);
                    xhr.send(null);
                }
                else {
                    alert("Sorry, but I could't create an XMLHttpRequest");
                }
        }
    }
}
}