setTimeout wewnątrz $ .each()

Question

ok, więc mam ten kod:

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

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

}); 

Chcę wymienić każdy element z drugim, ale chcę opóźnienie między sobą wymieniać.

Nie mogę zrozumieć, dlaczego to nie działa, po prostu zastępuje je wszystkie po jednym czasie oczekiwania.

Wszelkie pomysły?

Dzięki.

Answer 1

Zapętlasz elementy i dodajesz do nich timer z tą samą konfiguracją. Zasadniczo nowy timer jest natychmiast konfigurowany dla każdego elementu. Na pierwszym tiku wszystkich timerów elementy są aktualizowane. Interwał jest taki sam dla każdego, więc wszystkie wydają się aktualizować w tym samym czasie.

Twoja logika musi być wyśrodkowana wokół licznika czasu. Każdy znacznik zegara musi aktualizować następny element w kolekcji. Nie potrzebujesz żadnej pętli, użyj timera połączonego z inkrementowanym indeksem jako mechanizmu zapętlenia, zatrzymując timer po zaktualizowaniu ostatniego elementu.

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

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

Coś jak powyżej, ale również pamiętać, aby zatrzymać stoper!

Answer 2

Spróbuj z window.setTimeout.

Answer 3

Dokładnie tak napisał Andy McCluggage. Myślę, że coś takiego może ci pomóc.

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

Po prostu modyfikuję twój kod i dokonam niewielkiej zmiany. Po prostu mała sztuczka.

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