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 funciona, simplemente reemplaza a todos después de un tiempo de espera.

¿Alguna idea?

Gracias.

Answer 1

Está recorriendo los elementos y agregando un temporizador a cada uno con la misma configuración. Esencialmente, un nuevo temporizador se configura instantáneamente para cada elemento. En el primer tic de todos los temporizadores, los elementos se actualizan. El intervalo es el mismo para cada uno de modo que todos parecen actualizarse al mismo tiempo.

Su lógica debe centrarse en el temporizador. Cada tic del temporizador necesita actualizar el siguiente elemento en la colección. No necesita un ciclo, use el temporizador combinado con un índice incrementado como mecanismo de bucle, y detenga el temporizador 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 como arriba, pero recuerde también detener el temporizador!

Answer 2

Probar con window.setTimeout.

Answer 3

Es exactamente como escribió Andy McCluggage. Creo que algo así podría ayudarte.

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

Acabo de modificar su código y hacer un pequeño cambio. Solo un pequeño truco.

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