Comment utiliser setInterval ou setTimeout avec une boucle?

Question

Je suis en train de définir un intervalle lorsque quelques pistes de code, mais ne doivent le faire en fonction du nombre d'éléments il y a. Voici un exemple rapide:

5 éléments totaux

Exécuter du code une fois toutes les 20 secondes pour chaque élément que l'on trouve.

Quelqu'un peut-il s'il vous plaît me donner un exemple de base comment faire en utilisant JavaScript plaine? Tout ce que j'ai essayé juste exécute tout le code à la fois au lieu de faire un élément à la fois.

Answer 1

Supposons que vous parlez des éléments d'un tableau ou une collection DOM

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess() {
       if (len--) {
           /* do something with arr[len] */
           setTimeout(doProcess, 20000);
       }
   })();    
})();

Edit: si vous ne pouvez pas inverser le tableau pour une raison quelconque, utiliser juste à côté la version

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess(i) {
       if (i) {
            console.log(len - i);
           /* do something with arr[len - i] */
           setTimeout(function() { doProcess(--i); }, 20000);
       }
   })(len);    
})();

Answer 2

Regardez cet exemple: http: //juixe.com/techknow/index.php/2005/10/28/put-javascript-to-sleep/

Answer 3

Voici un code que je l'ai fait pour animer des images en utilisant jQuery:

var enter = 500;
var show = 4000;
var exit = 300;
var direction1 = "right"; 
var direction2 = "left";
var logo = document.getElementById('Box1').getElementsByTagName('img');
var Num = $('#Box1 img').length;
var time_each = (enter+show+exit);
function startBox1(){
for(x=0;x<=Num-1;x++){
Box1(x);
}
}  
function Box1(x){
var buffer = time_each*x;
$(logo[x]).delay(buffer).show("slide", { direction: direction1 }, enter).delay(show).hide("slide", { direction: direction2 }, exit);
}
$(function(){
startBox1();
setInterval("startBox1()",(time_each)*Num);
});

L'astuce était de mettre un tampon qui a égalé le temps qu'il a fallu pour chaque animation par l'indice de l'animation actuelle. La boucle de FOR exécute chaque code immédiatement; l'action .delay() et la variable tampon fait apparaître comme si chaque animation se passait un après l'autre. Puis setInterval() rappelle la boucle de FOR après chaque animation est terminée. Il redémarre le processus en continu.

Answer 4

Vous devez définir une fonction, et à l'intérieur de la fonction, il est nécessaire de régler un délai d'attente sur elle-même. Comme ceci:

var els = [1, 2, 3, 4, 5];

((function process_els(el_index) {
  var el = els[el_index];

  // do stuff to el here
  console.log(el);
  // do stuff to el above

  if (el_index + 1 < els.length) {
    setTimeout(function() { process_els(el_index + 1); }, 20000);
  }
})(0);