Javascript setTimeout in foreach: need help creating a closure

Question

I have this function

notes.forEach(function(note) {          
    setTimeout(function() {
        playNote(note);
    }, 1000);
});

This doesn't work. It plays all the notes at the same time, instead of playing them sequentially with a 1 second gap in between. It looks like I need to have a closure here to make this work. Could someone help me fix this function so it would play the note with the delay between each note?

Answer 1

There are two ways to do this:

1) Have a function that grabs one note every second until there are no more notes:

var interval = setInterval(function() {
  playNote(notes.shift()); // changes the notes array!
  if (!notes.length) clearInterval(interval);
}, 1000);

2) Start all the timers at the same time with different delays:

notes.forEach(function(note, index) {
  setTimeout(playNote.bind(null, note), index*1000);
});

Answer 2

because all timeouts are set at the same time...

Do something like this:

playAllNotes(0);
function playAllNotes(index) {
    if(notes.length > index) {
        setTimeout(function() {
            playNote(notes[index]);
            playAllNotes(++index);
        }, 1000);
    }
}