setTimeout all'interno $ .each ()

Question

ok, quindi ho questo codice:

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

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

});

Voglio sostituire ogni elemento con un altro, ma voglio un ritardo tra ogni sostituzione.

Non riesco a capire perché questo non sta funzionando, solo sostituisce tutti loro dopo un timeout.

Tutte le idee?

Grazie.

Answer 1

Si sono loop attraverso gli elementi e l'aggiunta di un timer per ciascuna con la stessa configurazione. In sostanza un nuovo timer è impostato all'istante per ogni elemento. Al primo segno di spunta di tutti i timer gli elementi vengono aggiornati. L'intervallo è la stessa per ciascuno così tutti sembrano aggiornare contemporaneamente.

La logica deve essere centrato intorno al timer. Ogni tick del timer deve aggiornare l'elemento successivo della raccolta. Non hai bisogno di una ogni ciclo, utilizzare il timer in combinazione con un indice incrementato come meccanismo di loop, fermando il timer dopo aver aggiornato l'ultimo elemento.

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

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

Qualcosa come sopra, ma ricordatevi di fermare anche il timer!

Answer 2

Ho appena modificare il codice e fare un piccolo cambiamento. Solo un piccolo trucco.

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

Answer 3

E 'esattamente come Andy McCluggage scritto. Penso che qualcosa di simile potrebbe aiutare.

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

Prova con window.setTimeout.