web-dev-qa-db-fra.com

Comment utiliser la fonction setInterval dans la boucle for

J'essaie d'exécuter plusieurs minuteries avec une liste d'éléments variable. Le code ressemble à ceci:

var list = Array(...);

for(var x in list){
    setInterval(function(){
        list[x] += 10;
        console.log(x + "=>" + list[x] + "\n");
    }, 5 * 1000);
}

Le problème avec le code ci-dessus est que la seule valeur mise à jour est l'élément à la fin de la liste, multiplié par le nombre d'éléments de la liste. 

Quelqu'un peut-il proposer une solution et des explications afin que je sache pourquoi il se comporte de cette manière?

javascriptfor-loopclosuressetinterval
27
hyleaus

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

for (var i = 0, len = list.length; i < len; i += 1) {
    (function(i) {
        setInterval(function() {
            list[i] += 10;
            console.log(i + "=>" + list[i] + "\n");
        }, 5000)
    })(i);
}

Voici le code de travail:

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

for (var i = 0, len = list.length; i < len; i += 1) {
    (function(i) {
        setInterval(function() {
            list[i] += 10;
            console.log(i + "=>" + list[i] + "\n");
        }, 5000)
    })(i);
}

Ici, l'index i est stocké dans une fonction anonyme afin qu'il ne soit pas écrasé par des boucles consécutives. La fonction setInterval de votre code conserve la référence uniquement à la dernière valeur de i.

37
Lapple

Vous n'êtes pas obligé d'utiliser un cycle for avec l'instruction setInterval. Essaye ça:

var list = Array(...);
var x = 0;

setInterval(function() {

    if (x < list.length;) {
        list[x] += 10;
        console.log(x+"=>"+list[x]);
    }

    else return;

    x++;
}, 5000);
4
uncleJessie

Je ne sais pas comment faire cela avec une boucle for mais ce code affichera chaque élément d'un tableau à intervalles réguliers

function displayText(str) {
   $('.demo').append($('<div>').text(str));
}
var i = 0;

var a = [12, 3, 45, 6, 7, 10];

function timedLoop() {
setTimeout(function () {
    displayText(a[i]);
    i++;
    if(i < a.length) {
        timedLoop();
    }
}, 2000)
}

timedLoop();

Utiliser un peu de jquery pour l’afficher dans le navigateur. 

2
Ryan Mc

Si vous avez un tableau JSON et jQuery inclus, vous pouvez utiliser:

$.each(jsonArray, function(i, obj) {
    setInterval( function() {
        console.log(i+' '+obj);
    }, 10);
});
0
Atul Yadav

Vous pouvez combiner forEach et setTimeout pour parcourir le tableau avec l'intervalle.

let modes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let interval = 1000; //one second
modes.forEach((mode, index) => {

  setTimeout(() => {
    console.log(mode)
  }, index * interval)
})

0
Taha A.