請幫忙!!當我搜索這個時，我看到很多混合的結果，這些都不適用於此。我的目標基本上是將隨機並動態填充的歌曲列表轉換爲播放列表，以便每首歌曲依次播放，而youtube或soundcloud的iframe按順序依次播放。使用Javascript For循序漸進的Ajax調用 - 播放列表
我有一個簡單的從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，第二首，等等。每首歌曲的媒體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，或數組key其中被點擊的媒體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歌曲，並根據哪些內容將媒體ID與ajax一起發送到一個php腳本，該腳本會將該id嵌入到html5 iframe嵌入Widget中的任何一種，如下所示：
$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裏，這首歌就會在相應的widget裏播放。我想象的完成播放列表的目標是從循環中點擊歌曲的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");
}
}
}
}
}