$ .each（内側のsetTimeout）

Question

[OK]をので、私はこのコードを持ってます：

$(this).find('article.loading').each( function(i) {

    var el = this;
        setTimeout(function () {
        $(el).replaceWith($('#dumpster article:first'));
    }, speed);

});

私は別で、各要素を交換したいが、私はそれぞれ置き換える間の遅延を望んます。

これが機能しない理由

私は把握することはできません、それだけで1つのタイムアウト後にそれらのすべてを置き換えます。

任意のアイデア？

感謝します。

Answer 1

あなたは要素をループして同じ構成で、それぞれにタイマーを追加しています。基本的に新しいタイマーを瞬時に各要素ごとに設定されています。すべてのタイマーの最初の目盛り上の要素が更新されます。それらはすべてが同時に更新するように見えるので、間隔はそれぞれに同じである。

あなたのロジックは、タイマーを中心とする必要があります。タイマーの各目盛りは、コレクション内の次の要素を更新する必要があります。あなたは最後の要素を更新した後、タイマーを停止する、あなたのループメカニズムとしてインクリメントインデックスと組み合わせるタイマーを使用し、各ループを必要としません。

var elements = $(this).find('article.loading');
var index = 0;

setTimeout(function () {
    $(elements).get(index).replaceWith($('#dumpster article:first'));
    index++;
}, speed);

上記のような何かが、また、タイマーを停止することを忘れないでください！

Answer 2

私は自分のコードを変更し、少し変更を加えます。 ほんの少しトリックます。

$(this).find('article.loading').each( function(k, v) {
    var el = this;
        setTimeout(function () {
        $(el).replaceWith($('#dumpster article:first'));
    }, k*speed);
});

Answer 3

これは、アンディー・マクラゲージが書かれた正確にどのようにです。私はこのような何かがあなたを助けることができると思います。

var speed = 1000;

// init timer and stores it's identifier so it can be unset later
var timer = setInterval(replaceArticle, speed);

var articles =  $('article.loading');
var length = articles.length;

var index = 0;
function replaceArticle() {
     articles.eq(index).replaceWith($('#dumpster article:first'));

     index++;

     // remove timer after interating through all articles
     if (index >= length) {
         clearInterval(timer);
     }
}

Answer 4

window.setTimeoutてみます。