爲什麼這個循環改變每一輪的所有值

我想創建一個函數，獲取音頻文件的URL數組，然後爲每個音頻對象獲取其持續時間並將其添加到其相應的html元素。爲什麼這個循環改變每一輪的所有值

這裏是我的代碼：

var audio, musicArray; 
musicArray = [ 
    "https://dl.dropboxusercontent.com/u/33538012/music/music1.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music2.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music3.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music4.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music5.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music6.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music7.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music8.mp3" 
]; 

audio = new Audio(); 

addDuration(musicArray); 

function addDuration(array) { 
    var x = 1; 
    $.each(array, function() { 
    audio.src = array[x]; 
    $(audio).on("loadedmetadata", function() { //front 
     $("li#row" + x).html(audio.duration); 
    }); 
    }); 
}

HTML：

<ul> 
    <li class="row1"></li> 
    <li class="row2"></li> 
    <li class="row3"></li> 
    <li class="row4"></li> 
    <li class="row5"></li> 
    <li class="row6"></li> 
    <li class="row7"></li> 
    <li class="row8"></li> 
    <li class="row9"></li> 
</ul>

它想表明每首歌曲的持續時間，其右html元素。例如：row1 == musicArray [1]

編輯：這個問題是完全不同的可能重複的。即使解決它的代碼和方法也不同。

任何想法如何使它？

來源

2016-02-12 TheGuy

代碼會隨時更新'李＃row1' - 因爲x是始終爲1 –

一旦你已經得到了'x'遞增，見[JavaScript的閉包內環路 - 簡單實用的例子]（http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example） – JJJ

它不是一個封閉的問題 - $ .each提供了一個現成的封閉 –

隨着一點點的重新安排，你的代碼可以做你想做的

var musicArray; 
musicArray = [...]; 

addDuration(musicArray); 

function addDuration(array) { 
    $.each(array, function (index, src) { // index is 0...array.length - 1 
     var audio = new Audio(); // new audio object for each bit of audio 
     $(audio).on("loadedmetadata", function() { //front 
      $("li#row" + (index+1)).html(audio.duration); // index+1 because your li's are 1...n, and array indexes are 0...(arry.length-1) 
     }); 
     audio.src = src; // add the source AFTER adding the event listener - maybe not necessary, but what if the event fires before you have a listener for it? 
    }); 
}

我已經在代碼中添加註釋，希望這足以幫助

但是......一些解釋呢

由$。每次調用的函數被調用幾個參數

function(index, arrayitem, ...) - 所以，你不需要使用musicArray[index]內部的功能，因爲它提供了arrayitem參數

你的編號爲1 ... 9（即使你只有8個網址，但沒關係）...數組中的索引從0 .. .7在這種情況下（8項） - 因此爲什麼（索引+ 1）

來源

2016-02-12 22:44:24

感謝您的回答。這是可以理解的，但不幸的是不起作用。 [這是你的代碼的演示版本]（https://jsfiddle.net/schtftzd/3/）。此外，還有什麼其他方法可以將'Audio'對象保留在循環外部，或者在'duration'被採用後立即移除/摧毀它？因爲我在頁面中有另一個Audio對象，所以讓這個對象在一些瀏覽器中出現兩次問題。 – TheGuy

對不起，我把audio.src = src放在錯誤的位置 - 編輯...看到[工作小提琴]（https://jsfiddle.net/schtftzd/4/） –

-1

數組從0開始而不是從1開始，因此當初始化x = 1時，您只能從「 musicArray」。你的「x」永遠不會改變，並且總是保持爲1，你需要在每次迭代後增加它。速戰速決將是：

function addDuration(array) { 

    $.each(array, function(x,item) { 
    var audio = new Audio(); 
    audio.src = item; 
    $(audio).on("loadedmetadata", function() { //front 
     $("li#row" + (x+1)).html(audio.duration); 
    }); 
    });

來源

2016-02-12 22:44:31

@JaromandaX修復它 –

@JaromandaX感謝您的輸入 –

爲什麼這個循環改變每一輪的所有值

回答

相關問題