setTimeout внутри $.each()

Question

ОК, у меня есть этот код:

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

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

});

Я хочу заменить каждый элемент другим, но мне нужна задержка между каждой заменой.

Я не могу понять, почему это не работает, оно просто заменяет их всех после одного тайм-аута.

Есть идеи?

Спасибо.

Answer 1

Вы перебираете элементы и добавляете таймер к каждому с одинаковой конфигурацией.По сути, для каждого элемента мгновенно устанавливается новый таймер.При первом тике всех таймеров элементы обновляются.Интервал одинаковый для каждого, поэтому все они обновляются одновременно.

Ваша логика должна быть сосредоточена вокруг таймера.Каждый такт таймера должен обновлять следующий элемент в коллекции.Вам не нужен каждый цикл, используйте таймер в сочетании с увеличенным индексом в качестве механизма цикла, останавливая таймер после обновления последнего элемента.

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

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

Примерно так же, как описано выше, но не забудьте также остановить таймер!

Answer 2

Я просто модифицирую ваш код и вношу небольшие изменения.Просто маленькая хитрость.

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

Answer 3

Именно так написал Энди МакКлюггедж.Я думаю, что-то подобное могло бы вам помочь.

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

Попробуйте с window.setTimeout.