calling multiple setInterval() functions in js with a loop

Question

I'm new to javascript and I'm having trouble using the setInterval() function properly.

Basically I want to call a function at different given intervals for different parameters both of which I have in lists.

I have a function called myfunction. I have a list called myparam with all of the variables I want to pass this function. And finally I have a list called myfrequency which is the time in millis that I want between each call of myfunction with the parameter given in myparam. I'm trying something like this but it's not working:

for(i=0;i<myparam.length();i++;){
    setInterval(function(){myfunction(myparam[i]);},myfrequency[i]);
    }

The result of the above code is that it works only for the last index. myfunction gets called at the correct interval with the correct parameter for ONLY the last value in myparam.

Why does this happen? Is my thinking that setInterval() sets up the calling of a function at an interval incorrect?

http://stackoverflow.com/questions/2728278/what-is-a-practical-use-for-a-closure-in-javascript read the answers, one of them shows your exact problem — Sterling Archer, May 12 '17 at 02:29
Very common problem. What is happening is that by the time your setInterval fires, the loop is already done so `i` is pointing to the last element — david, May 12 '17 at 02:33
@david does adding a delay fix this? I tried adding a delay with setTimeout() for each time setInterval is called but now its not working at all. — Saxman13, May 12 '17 at 02:41

score 1 · Accepted Answer · answered May 12 '17 at 02:42

1

Well it's because setInterval has a delay which means when the interval runs the loop is already been finish

To do that just create another function which will start your interval

function StartInterval(index, frequency) {
    setInterval(function(){
        myfunction(index);
    },frequency);
}

Then inside your loop just call this function and pass something

for(i=0;i<myparam.length;i++){
    StartInterval(myparam[i], myfrequency[i])
}

   
/** set what value you want **/
var myparam = [10,20,30];
var myfrequency = [1000,2000,3000];


function myfunction(index) {
  console.log(index);
}

function StartInterval(index, frequency) {
  setInterval(function(){
    myfunction(index);
  },frequency);
}

for(i=0;i<myparam.length;i++){
  StartInterval(myparam[i], myfrequency[i])
}

answered May 12 '17 at 02:42

Beginner

4,118
3
17
26

Dah - just beat me to it! Also to note - the original javascript has a few syntax issues. myparam.length is a property, not a function (assuming that myparam is an array), and the last semicolon of the for loop (i++;) is not needed. The reason this is a problem deals with what is called a "closure". Since the var i is in scope of where you are calling "myfunction", by the time the Interval timer expires, the value of i is actually beyond the end of your myparam array, so I'm surprised it would report anything meaningful. It should be sending "undefined" to myfunction. – pacifier21 May 12 '17 at 02:46
Thank you so much! @Beginner I just incorporated what you said into my code and it works flawlessly now!! – Saxman13 May 12 '17 at 02:52
@pacifier21 yes, I know my syntax was awful in the original, I was trying to simplify the actual code I have and I changed a few things – Saxman13 May 12 '17 at 02:55

calling multiple setInterval() functions in js with a loop

1 Answers1