SetTimeout innerhalb $ .each ()

Question

ok, also habe ich diesen Code habe:

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

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

});

Ich mag jedes Element mit einem anderen ersetzen, aber ich mag eine Verzögerung zwischen jedem ersetzen.

ich kann nicht herausfinden, warum dies nicht funktioniert, es ersetzt nur alle von ihnen nach einem Timeout.

Irgendwelche Ideen?

Danke.

Answer 1

Sie sind Looping der Elemente durch und einen Timer zu jedem mit der gleichen Konfiguration hinzuzufügen. Im Wesentlichen wird eine neue Timer sofort für jedes Element eingestellt. Auf dem ersten tick aller Zeiten werden die Elemente aktualisiert. Das Intervall ist für jeden, so dass sie alle zur gleichen Zeit aktualisieren erscheinen.

Ihre Logik muss um den Timer zentriert werden. Jede Zecke des Timers muss das nächste Element in der Sammlung aktualisieren. Sie benötigen keine jede Schleife benötigen, verwenden Sie den Timer mit einem inkrementierten Index als Looping Mechanismus kombiniert, stoppen Sie den Timer, wenn Sie das letzte Element aktualisiert haben.

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

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

So etwas wie oben, aber denken Sie daran, auch den Timer zu stoppen!

Answer 2

ich Ihren Code einfach ändern und eine kleine Änderung machen. Nur ein kleiner Trick.

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

Answer 3

Es ist genau, wie Andy McCluggage geschrieben. Ich denke, so etwas wie dies könnte Ihnen helfen.

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

Versuchen Sie, mit window.setTimeout.