Calling setTimeout in a loop not working as expect

Question

The following JavaScript ought to (in my mind) play a sequence of notes 0.5 sec apart. But it plays them all as a single simultaneous chord. Any idea how to fix it?

function playRecording() {
    if (notes.length > 0) {
        for (var i = 0; i < notes.length; i++) {
            var timeToStartNote = 500 * i;
            setTimeout(playNote(i), timeToStartNote);
        }
    }
}

function playNote(i) {
    var noteNumber = notes[i];
    var note = new Audio("/notes/note_" + noteNumber + ".mp3");
    note.play();
}

Answer 1

Thanks folks, and here is the complete solution to my question:

function playRecording() {
    if (notes.length > 0) {
        for (var i = 0; i < notes.length; i++) {
            playNote(i);
        }
    }
}

function playNote(i) {
    setTimeout(function () {
        var noteNumber = notes[i];
        var note = new Audio("/notes/note_" + noteNumber + ".mp3");
        note.play();
    }, 500 * i);
}

Answer 2

Very simple actually, in the for loop you call the function playNote(i) which plays the note i instantaneously (and therefore play many notes instantly like a chord since it is in a really fast running for loop). Instead you should try code this which lets the timeout actually play the note. The setTimeout function expects the function as an argument instead you called the function.

(function(j){setTimeout(function(){playNote(j);},j*500);}(i));

Answer 3

JavaScript closures, wrap this in a self-executing function:

for (var i = 0; i < notes.length; i++) { 
    (function(i) {
       var timeToStartNote = 500 * i;
       setTimeout(function() {
           playNote(i)
       }, timeToStartNote);
    })(i)
}