为什么这个循环改变每一轮的所有值

我想创建一个函数，获取音频文件的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感谢您的输入 –

为什么这个循环改变每一轮的所有值

回答

相关问题