使用setInterval和Loop播放音频

Question

I have this array:

var song = ['note1.mp3', 'note2.mp3', 'note3.mp3', 'note4.mp3']

for(i = 0; i < song.length; i++) {
  setInterval(function() {

    //play song[i]
    //or console.log(song[i]);

  }, 1000);

}

But this dont work, does anybody has an idea why? I want to play note1.mp3 then note2, note3 and note4.

Thanks!

Answer 1

You have a scope issue. There is one i for all callbacks, you have to create a scope for each i . You also have to differ the callback.

http://jsfiddle.net/1xy4j3eq/7/

var song = ['a', 'b', 'c', 'd', 'e'];

$.each(song, function (i) {
    setTimeout(function () {
        $("div").text(song[i]);
    }, i * 1000);
});

Answer 2

According to your comment, the behavior you get is that you always get the last song. This is because the interval function closes on the loop counter i , so that it uses the value that i has at the time the interval function is called , which will always be the last value.

Generally, you should never setup callbacks within a loop like that. Instead, you could do something like this

var song = ['note1.mp3', 'note2.mp3', 'note3.mp3', 'note4.mp3']
var makeCallback = function(index) { 
    return function() {
        console.log(index);
    }
}

for(i = 0; i < song.length; i++) {
  setInterval(makeCallback(i), 1000);            
}

thus generating a different closure for each iteration