setTimeout inside $.each()

Question

ok, so I\'ve got this code:

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

    var el = this;
        setTimeout(function () {
        $(el).replaceWith(         


        

Answer 1

I just modify your code and make a little change. Just a little trick.

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

P.S. This solution is not the optimize solution but it help you to get job done fast. In most case it's fine. Just like jquery itself.

Answer 2

You are looping through the elements and adding a timer to each with the same configuration. Essentially a new timer is instantly set up for each element. On the first tick of all the timers the elements are updated. The interval is the same for each so they all appear to update at the same time.

Your logic needs to be centred around the timer. Each tick of the timer needs to update the next element in the collection. You don't need an each loop, use the timer combined with an incremented index as your looping mechanism, stopping the timer once you have updated the last element.

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

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

Something like above, but remember to also stop the timer!

Answer 3

Try with window.setTimeout.

Answer 4

It's exactly how Andy McCluggage written. I think something like this could help you.

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);
     }
}