的setTimeout裏面$。每（）

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

試用window.setTimeout。

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

我只是修改代碼並稍作改動。 只是一個小竅門。

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