JavaScript foreach循環轉到回調中的下一個元素

Question

for(var P in ReturnData.Playlist){ 
    var IsLoaded = false; 
    if(PlayerName == "A"){ 
     LoadNavA(false,false,false, ReturnData.Playlist[P], function(){ 
      IsLoaded = true; 
      alert(); 
     }); 
     }else{ 
     LoadNavB(false,false,false, ReturnData.Playlist[P],function(){ 
      IsLoaded = true; 
     }); 
    } 
    if(IsLoaded == true) continue; 
} 

這是用於音樂播出系統的。 LoadNavA和LoadNavB函數異步地將音軌加載到播放列表。這些元素必須按正確的順序排列。當軌道3比軌道2早加載時，它首先放置軌道3和軌道2，但當軌道1和2已經加載時，它應該開始加載軌道3。

當調用回調LoadNavA或LoadNavB時，循環應該繼續。怎麼樣？

Answer 1

你面臨的問題是，LoadNavA和LoadNavB調用異步操作，它可以在任何順序返回，但你試圖執行一些排序。這是一個問題，因爲在實際執行回調的過程中，您的循環已經完成，所以您嘗試保留處理是錯誤的。

相反，您需要的是按順序調用某些異步操作的方法。我寫了一個通用的函數來實現：

// receives a callback and the elements to iterate 
function loop(list, fn) { 
    if (!list || list.length <= 0) 
     return; 
    (function chain(i) { 
     if (i >= list.length) 
      return; 
     fn(list[i], function() { 
      chain(i + 1); 
     }); 
    })(0); 
} 

此功能假定您給它會執行一些操作，一旦完成該操作將開球鏈下一步的回調。爲了使這個具體，這裏是一個基於你的代碼的例子。

首先，一個小設置，這樣我們就可以與你的榜樣工作：

var PlayerName = "B"; 
var ReturnData = {}; 
ReturnData.Playlist = ["song1", "song2", "song3"]; 

function LoadNavA(b1, b2, b3, el, fn) { 
    // this could be any asynchronous call (e.g. Ajax) 
    // using setTimeout here for illustration 
    window.setTimeout(fn, 2000); 
} 

var LoadNavB = LoadNavA; // for brevity 

現在，loop實際使用情況：

loop(ReturnData.Playlist, function(song, next) { 
    if (PlayerName == "A") { 
     LoadNavA(false, false, false, song, function() { 
      alert("LoadNavA: " + song); 
      next(); 
     }); 
    } else { 
     LoadNavB(false, false, false, song, function() { 
      alert("LoadNavB: " + song); 
      next(); 
     }); 
    } 

}); 

給出的第二個參數loop回調將爲列表中的每個元素執行一次。它接收播放列表中的一個元素作爲參數，並接收一個稱爲next的函數。此回調可以自由執行任何異步操作，只要這些操作在完成後調用next函數即可。這是我們前進播放列表中下一個元素的機制，以便可以爲每個元素重複該過程。