javascript setInterval function inside loop not working

Question

I'm attempting to launch severals setInterval functions "at once". I've got a for loop which call a function indexed, which contains the setInterval.

I've looked for answer both here: JavaScript closure inside loops – simple practical example and here: setInterval with loop time

but i'm still struggling with no success...

I've checked tab and tab2, both works if I read them with console.log outside of the setInterval function

here is my code :

var tab = <?php echo json_encode($matrice); ?>;
var tab2 = new Array();

var funcs = [];

var countDownAction = new Array();

function countDown(i)
{
    countDownAction[i] = setInterval(function(i)
    {
        // some actions

    }, 1000);  
}


for(var i = 0; i < tab.length; i++)
{
    tab2[i] = [];

    tab2[i]['hours'] = tab[i]['hours'];
    tab2[i]['minutes'] = tab[i]['minutes'];
    tab2[i]['seconds'] = tab[i]['seconds'];

    funcs[i] = countDown.bind(this, i);
}

for(var j = 0; j < tab.length; j++)
{
    funcs[j]();
}

You're passing a function to setinterval which takes a parameter i, but setInterval passes no parameter to its callback, so i will be undefined. — user663031
– user663031, Commented May 25, 2016 at 18:11
"but i'm still struggling with no success..." Define success in your eyes. What is suppose to happen vs. what is currently (not) happening? — mferly
– mferly, Commented May 25, 2016 at 18:16

Adeel Zafar Soomro · Accepted Answer · 2016-05-25 18:58:28Z

2

The function inside setInterval is called without any arguments. Thus, i inside the function's body will be undefined.

Consider rewriting countDown function as follows:

function countDown(i)
{
    countDownAction[i] = setInterval(function()
    {
        // some actions

    }, 1000);  
}

This way, the body of the function has access to i in the outer scope.

To clear the timers, say 3.5 seconds later, you can do the following:

setTimeout(function () {
    for (var k = 0; k < tab.length; k++) {
        clearInterval(countDownAction[k]);
    }
}, 3500);

edited May 25, 2016 at 18:58

answered May 25, 2016 at 18:15

Adeel Zafar Soomro

1,52210 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gZ Fab Over a year ago

it may sounds stupid, but I'm not able to clear those multiples setInterval with a function called the same way I've called those setInterval functions...

Fareed Alnamrouti · Accepted Answer · 2016-07-05 19:50:17Z

0

I recommend you use global variable for countDownAction , can you try the following instead.

window.countDownAction = window.countDownAction || [];

answered Jul 5, 2016 at 19:50

Fareed Alnamrouti

32.3k4 gold badges90 silver badges78 bronze badges

Comments

salah hasan AL_Khafaji · Accepted Answer · 2020-01-24 10:58:00Z

0

the problem is that the loop is so fast , so the setInterval function get the last value of i variable. we need to set i value directly in the interval by using external function like this :

var interval_Array = new Array();

for(var i; i<= number ;i++){
    var newinterval = (i+1) * 1000; //Place any process according to your time
    external_function(i,newinterval);
};

function external_function(this_i,this_interval){
    interval_Array[i]=setInterval(function(){
      //your script that contains i variable
    },this_interval);
};

edited Jan 24, 2020 at 10:58

answered Jan 24, 2020 at 10:51

salah hasan AL_Khafaji

293 bronze badges

Collectives™ on Stack Overflow

javascript setInterval function inside loop not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related