How to use setInterval function within for loop
So, a few things:
- Most importantly, the callback function you've passed to
setInterval()
maintains a reference tox
rather than the snapshot value ofx
as it existed during each particular iteration. So, asx
is changed in the loop, it's updated within each of the callback functions as well. - Additionally,
for...in
is used to enumerate object properties and can behave unexpectedly when used on arrays. - What's more, I suspect you really want
setTimeout()
rather thansetInterval()
.
You can pass arguments to your callback function by supplying additional arguments to setTimout()
:
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
Numbers will be passed by value rather than reference. Here's an example:
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
}
You don't have to use a for cycle with the setInterval
statement. Try this:
var list = Array(...);
var x = 0;
setInterval(function() {
if (x < list.length;) {
list[x] += 10;
console.log(x+"=>"+list[x]);
}
else return;
x++;
}, 5000);
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);
}
Here is the working code:
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);
}
Here the index i
is stored in an anonymous function, so that it is not overwritten by consecutive loops. setInterval
function in your code keeps the reference only to the last value of i
.
You can combine forEach
and setTimeout
to loop over the array with the interval.
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)
})