jquery - 2秒間隔で各要素を追加します

Question

一連のアイテムのHTMLコードを含む変数があります。これらすべての項目を2秒間隔で追加したいと思います。以下に書いたコードは、すべての項目を一度に追加します。setTimeout()内にあるので、なぜこれを行っているのかわかりませんeach()。

var myVar = "<div class='item'>Item01</div>" +
            "<div class='item'>Item02</div>" +
            "<div class='item'>Item03</div>";

$(myVar).each( function() {
    var value = $(this);
    setTimeout( function {
        $('.item-list').append(value);
    }, 2000);
}

Answer 1

これを試して：

var myVar = "<div class='item'>Item01</div>" +
            "<div class='item'>Item02</div>" +
            "<div class='item'>Item03</div>";

$(myVar).each( function(index) {
    var value = $(this);
    setTimeout( function() {
        $('.item-list').append(value);
    }, 2000 * (index + 1));
};

説明

元のコードでは、ループは非常に速く発生します。ループの各反復に1msかかるとしましょう。つまり、最初のアイテムは2001ミリ秒後に追加され、2番目のアイテムは2002ミリ秒後に追加され、3番目のアイテムは2003ミリ秒後に追加されます。

配列内のアイテムのインデックスを取得することで、最初のアイテムを2000ミリ秒後に追加し、2番目のアイテムを4000ミリ秒後に追加することができます。

更新：構文エラーを修正しました。