SetTimeOut dentro $ .each ()

Question

ok, então eu tenho este código:

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

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

});

Eu quero substituir cada elemento com outro, mas eu quero um atraso entre cada substituir.

Eu não consigo descobrir por que isso não está funcionando, ele só substitui todos eles depois de um tempo limite.

Todas as idéias?

Graças.

Answer 1

Você está em loop através dos elementos e adicionando um temporizador para cada um com a mesma configuração. Essencialmente um novo temporizador é imediatamente criado para cada elemento. No primeiro carrapato de todos os temporizadores os elementos são atualizados. O intervalo é o mesmo para cada modo que todos eles parecem atualização ao mesmo tempo.

Sua lógica precisa ser centrado em torno do timer. Cada tique do temporizador precisa atualizar o próximo elemento na coleção. Você não precisa de um cada loop, use o timer combinado com um índice incrementado como seu mecanismo de loop, parar o temporizador uma vez que você tenha atualizado o último elemento.

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

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

Algo como acima, mas lembre-se de também parar o temporizador!

Answer 2

Eu apenas modificar seu código e fazer uma pequena mudança. Apenas um pequeno truque.

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

Answer 3

É exatamente como Andy McCluggage escrito. Eu acho que algo como isso poderia ajudá-lo.

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

Tente com window.setTimeout.