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 funziona, sostituisce semplicemente tutti dopo un timeout.

Qualche idea?

Grazie.

Answer 1

Si sta eseguendo un ciclo tra gli elementi e aggiungendo un timer a ciascuno con la stessa configurazione. In sostanza, un nuovo timer viene istantaneamente impostato per ciascun elemento. Al primo segno di spunta di tutti i timer, gli elementi vengono aggiornati. L'intervallo è lo stesso per ciascuno in modo che tutti vengano aggiornati contemporaneamente.

La logica deve essere centrata attorno al timer. Ogni segno di spunta del timer deve aggiornare l'elemento successivo nella raccolta. Non è necessario un ciclo ogni, utilizzare il timer combinato 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 ricordarsi di fermare anche il timer!

Answer 2

Provare con window.setTimeout.

Answer 3

È esattamente come ha scritto Andy McCluggage. Penso che qualcosa del genere possa aiutarti.

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

Ho appena modificare il codice e apportare 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); 
});