$ .each（）里面的setTimeout

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

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

我想用另一个元素替换每个元素，但我想在每个替换之间延迟。

我无法弄清楚为什么这不起作用，它只是在一次超时后替换所有这些。

有任何想法吗？

谢谢。

Answer 1

您循环遍历元素并为每个元素添加一个具有相同配置的计时器。 基本上，每个元素都会立即设置一个新的计时器。 在所有计时器的第一个刻度上，元素被更新。 每个时间间隔相同，因此它们似乎同时更新。

您的逻辑需要以计时器为中心。 计时器的每个tick都需要更新集合中的下一个元素。 您不需要每个循环，使用计时器和递增的索引作为循环机制，一旦更新了最后一个元素就停止计时器。

 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

这正是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); } } 

Answer 4

尝试使用window.setTimeout 。