Come utilizzare la funzione setInterval all'interno del ciclo

Question

Sto tentando di eseguire più timer dato un elenco variabile di elementi. Il codice simile a questa:

var list = Array(...); 

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

Il problema con il codice di cui sopra è che l'unico valore in corso di aggiornamento è l'elemento alla fine della lista, moltiplicato per il numero di elementi nella lista.

Qualcuno può offrire una soluzione e qualche spiegazione, quindi so perché si comporta in questo modo?

Answer 1

Così, un paio di cose:

1. più importante, la funzione di callback che hai passato a setInterval() mantiene un riferimento alla x piuttosto che il valore un'istantanea della x come esisteva nel corso di ogni particolare iterazione. Pertanto, poiché x viene modificato nel ciclo, viene aggiornato anche in ciascuna delle funzioni di callback.
2. Inoltre, for...in viene utilizzato per enumerare le proprietà dell'oggetto e può essere behave unexpectedly quando utilizzato su matrici.
3. Inoltre, ho il sospetto che vogliate davvero lo setTimeout() anziché lo setInterval().

È possibile passare argomenti alla funzione di callback fornendo ulteriori argomenti a setTimout():

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

Ecco un esempio:

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

 
for (var x = 0, ln = list.length; x < ln; x++) { 
 
    setTimeout(function(y) {  
 
    console.log("%d => %d", y, list[y] += 10); 
 
    }, x * 500, x); // we're passing x 
 
}

Per fortuna, i numeri viene passato dal valore piuttosto che dal riferimento.

Answer 2

Ecco il codice di lavoro:

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); 
} 

Qui l'indice i è memorizzato in una funzione anonima in modo che non venga sovrascritta da cicli consecutivi. La funzione setInterval nel codice mantiene il riferimento solo all'ultimo valore di i.

Answer 3

Non è necessario utilizzare un ciclo for con l'istruzione setInterval. Prova questo:

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

setInterval(function() { 

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

    else return; 

    x++; 
}, 5000); 

Answer 4

Se si dispone di serie JSON e jQuery incluso, è possibile utilizzare:

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

Answer 5

non so come fare questo con un ciclo, ma questo codice qui stamperà ciascun elemento di un array ad intervalli cronometrati:

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(); 

Usando un po 'di jquery per vederlo nel browser.