javascript - ループ内で setTimeout を呼び出すと期待どおりに動作しない

Question

次の JavaScript は (私の考えでは) 0.5 秒間隔で音符のシーケンスを再生する必要があります。しかし、それはそれらすべてを単一の同時和音として演奏します。それを修正する方法はありますか？

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

JavaScript クロージャーは、これを自己実行関数でラップします。

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

Answer 2

ありがとう、私の質問に対する完全な解決策は次のとおりです。

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 3

実際には非常に単純です。for ループplayNote(i)では、ノート i を瞬時に再生する関数を呼び出します (したがって、非常に高速に実行されている for ループ内にあるため、コードのように多くのノートを瞬時に再生します)。代わりに、タイムアウトが実際にノートを再生できるようにするコードを試す必要があります。関数は、関数を呼び出すのsetTimeoutではなく、関数を引数として期待しています。

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