SetTimeOut dentro $ each ()

Question

bien, así que tengo este código:

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

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

});

quiero reemplazar cada elemento con otro, pero quiero un retraso entre cada sustituir.

No puedo entender por qué esto no está funcionando, sólo se reemplaza todas ellas después de un tiempo de espera.

¿Alguna idea?

Gracias.

Answer 1

se recorre los elementos y la adición de un temporizador para cada uno con la misma configuración. Esencialmente un nuevo temporizador se establece instantáneamente para cada elemento. En la primera señal de todos los temporizadores de los elementos se actualizan. El intervalo es el mismo para cada uno por lo que todos parecen actualizar al mismo tiempo.

Su lógica tiene que estar centrada alrededor del temporizador. Cada tick del temporizador tiene que actualizar el siguiente elemento de la colección. Usted no necesita una cada bucle, utilice el temporizador combinado con un índice incrementado como su mecanismo de bucle, parando el cronómetro una vez que haya actualizado el último elemento.

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

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

Algo así como anteriormente, pero recuerde que debe dejar también el temporizador!

Answer 2

Me acaba de modificar el código y hacer un pequeño cambio. Sólo un pequeño truco.

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

Answer 3

Es exactamente cómo Andy McCluggage escrito. Creo que algo como esto podría ayudarle.

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

Trate con window.setTimeout.