$.each() 中的 setTimeout答案

【问题标题】：setTimeout inside $.each()$.each() 中的 setTimeout
【发布时间】：2010-11-19 05:51:05
【问题描述】：

好的，所以我有这个代码：

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

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

});

我想用另一个元素替换每个元素，但我希望每次替换之间有一个延迟。

我不知道为什么这不起作用，它只是在一次超时后替换所有这些。

有什么想法吗？

谢谢。

【问题讨论】：

标签： jquery each settimeout

【解决方案1】：

我只是修改了您的代码并进行了一些更改。只是一个小技巧。

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

附：该解决方案不是优化解决方案，但它可以帮助您快速完成工作。大多数情况下都很好。就像 jquery 本身一样。

【讨论】：

你能详细解释一下吗？
非常聪明非常简单
这是一个非常厚颜无耻的解决方案:)

【解决方案2】：

您正在循环遍历元素并使用相同的配置为每个元素添加一个计时器。本质上，会立即为每个元素设置一个新计时器。在所有计时器的第一个滴答声中，元素被更新。每个的间隔都是相同的，因此它们似乎都在同一时间更新。

您的逻辑需要以计时器为中心。计时器的每个滴答声都需要更新集合中的下一个元素。您不需要 each 循环，使用结合递增索引的计时器作为循环机制，在更新最后一个元素后停止计时器。

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

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

类似上面的东西，但记得也要停止计时器！

【讨论】：

这不应该使用 setInterval() 而不是 setTimeout() 吗？

【解决方案3】：

这正是 Andy McCluggage 所写的。我认为这样的事情可以帮助你。

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

【讨论】：

【解决方案4】：

试试window.setTimeout。

【讨论】：