setTimeout intérieur .each $()

Question

ok, donc j'ai ce code:

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

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

}); 

Je veux remplacer chaque élément avec un autre, mais je veux un délai entre chaque remplacer.

Je n'arrive pas à comprendre pourquoi cela ne fonctionne pas, il suffit de les remplacer tous après un délai d'attente.

Des idées?

Merci.

Answer 1

Vous parcourez les éléments et ajoutez un temporisateur à chacun avec la même configuration. Essentiellement, une nouvelle minuterie est instantanément mise en place pour chaque élément. Sur la première coche de tous les minuteurs, les éléments sont mis à jour. L'intervalle est le même pour chacun de sorte qu'ils semblent tous mettre à jour en même temps.

Votre logique doit être centrée autour de la minuterie. Chaque tick de la minuterie doit mettre à jour l'élément suivant dans la collection. Vous n'avez pas besoin d'une boucle pour chaque boucle, utilisez la minuterie combinée avec un index incrémenté comme mécanisme de bouclage, en arrêtant le minuteur une fois que vous avez mis à jour le dernier élément.

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

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

Quelque chose comme ci-dessus, mais n'oubliez pas d'arrêter également la minuterie!

Answer 2

Essayez avec window.setTimeout.

Answer 3

C'est exactement comment Andy McCluggage écrit. Je pense que quelque chose comme ça pourrait vous aider.

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

Je viens de modifier votre code et faire un petit changement. Juste un petit tour.

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