javascript setTimeout in a while loop

Question

Hello i want to have 4 timeOuts to update balls positions because the balls don't go at the same speed. here's a part of my code:

var i=1;
    while(i<=5)
    {
        console.log(i);
        intervals[i-1]=setInterval(function()
        {
            MoveBallHorizontalyWithSpeed(i);
            MoveBallVerticalyWithSpeed(i);
            showBalls();
            console.log(i);
        },speed/i);
        i++;
    }

the problem is that each timeout calls the functions with 6 but i whant the first timeout calling MoveBallHorizontalyWithSpeed(1) the second MoveBallHorizontalyWithSpeed(2) etc...

is there a way to do that faster than writing each timeout?

`for( let i=1; i<=5; i++)` – Niet the Dark Absol Jul 30 '21 at 11:06 — Niet the Dark Absol, Jul 30 '21 at 11:06

score 0 · Answer 1 · answered Jul 30 '21 at 10:57

Please try this:

var i=1;
    while(i<=5)
    {
        console.log(i);
const j = i;
        intervals[i-1]=setInterval(function()
        {
            MoveBallHorizontalyWithSpeed(j);
            MoveBallVerticalyWithSpeed(j);
            showBalls();
            console.log(j);
        },speed/j);
        i++;
    }

score 0 · Accepted Answer · answered Jul 30 '21 at 11:01

The problem is that you are using a global variable inside the loop so all the setInterval functions are using the same variable i, in this type of scenario always use a local variable. You should change your code like this:

for(let i = 1; i<=5; i++)
{
    console.log(i);
    setInterval(function()
    {
        console.log(i);
    },2000);
}

score 0 · Answer 3 · answered Jul 30 '21 at 11:04

The reason the while loop will finished its execution and will update the value of the i. So when setInterval execute it get the most latest value of i that is 6.

To avoid this you can create a closure and an IIFE and pass the value of i as a parameter to IIFE. Inside IIFE you can call setInterval

var i = 1;
intervals = [];
while (i <= 5) {
  intervals[i - 1] = (function(x) {
    setInterval(function() {
      MoveBallHorizontalyWithSpeed(x);
      MoveBallVerticalyWithSpeed(x);

    }, 10 / x);

  })(i)
  i++;
}

function MoveBallVerticalyWithSpeed(speed) {
  console.log(speed)
}

function MoveBallHorizontalyWithSpeed(speed) {
  console.log(speed)
}

javascript setTimeout in a while loop

3 Answers3